CSS實現垂直居中的4種思路

Pikachu 發布于2019-08-29 13:25 / 3506人閱讀

摘要：測試文字若子元素定高，結合絕對定位的盒模型屬性，實現居中效果測試文字關于增加層級的說明在水平居中對齊中，元素外層套一層并設置，元素設置負或者的負屬性，可以實現水平居中的效果。

行高line-height實現單行文本垂直居中

以前一直認為單行文本垂直居中要將高度和行高設置成相同的值，但高度其實沒必要設置。實際上，文本本身就在一行中居中顯示。在不設置高度的情況下，行高撐開高度。



測試文字

設置vertical-align:middle實現垂直居中

【1】設置父元素的display為table-cell

通過為table-cell元素設置vertical-align:middle，可使其子元素均實現垂直居中。這和表格里單元格的垂直居中是類似的

[注意] 若要IE7-瀏覽器支持，則可以將其改為

表格結構

[注意] 設置為table-cell的div不能使用浮動或絕對定位，因為浮動或絕對定位會使元素具有塊級元素特性，從而喪失了table-cell元素具有的垂直對齊的功能。

若需要浮動或絕對定位處理，則需要外面再套一層div。



    我是有點長的有點長的有點長的有點長的測試文字

【2】若子元素是圖片，通過設置父元素的行高來代替高度，且設置父元素的font-size為0。

vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2 父元素中字母X的高度對齊。由于字符X在em框中并不是垂直居中的，且各個字體的字符X的高低位置不一致。

所以，當字體大小較大時，這種差異就更明顯。當 font-size為0時，相當于把字符X的字體大小設置為0，于是可以實現完全的垂直居中。

【3】通過新增元素來實現垂直居中的效果

新增元素設置高度為父級高度，寬度為0，且同樣設置垂直居中vertical- align:middle的inline-block元素。由于兩個元素之間空白被解析，所以需要在父級設置font-size:0，在子級再將 font-size設置為所需值；若結構要求不嚴格，則可以將兩個元素一行顯示，則不需要設置font-size:0。



  我是比較長的比較長的多行文字

思路三：通過絕對定位實現垂直居中

【1】若子元素不定高，使用top50%配合translateY(-50%)可實現居中效果。
translate函數的百分比是相對于自身高度的，所以top:50%配合translateY(-50%)可實現居中效果。

[注意]IE9-瀏覽器不支持；

[注意]若子元素的高度已知，translate()函數也可替換為margin-top: 負的高度值。



  測試文字

【2】若子元素定高，結合絕對定位的盒模型屬性，實現居中效果



  測試文字

<關于增加div層級的說明>

在水平居中對齊中，元素外層套一層div并設置absolute，元素設置負margin-left或者relative的負left屬性，可以實現水平居中的效果。但由于margin是相對于包含塊寬度的，這樣margin-top:-50%得到的是寬度而不是高度的-50%，所以不可行；對于relative的百分比取值而言，在包含塊高度為auto的情況下，chrome、safari和IE8+瀏覽器都不支持設置元素的百分比top值，所以也不可行。

思路四：使用彈性盒模型flex實現垂直居中

[注意] IE9-瀏覽器不支持

【1】在伸縮容器上設置側軸對齊方式align-items: center



    測試文字

【2】在伸縮項目上設置margin: auto 0



    測試文字

GPU云服務器云服務器實現垂直居中垂直居中水平垂直居中文字垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112585.html

使一個div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個問題思路絕對定位居中原始版這個是我回答出來的，也是被各位所熟知的一種方法，設外層相對定位，內前幾天去一家互聯網公司面試，面試官問到了這個應該算是比較簡單的問題，在我自認為回答正確時，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...

joyqi 2019-08-29 11:04 評論0 收藏0
css實現水平/垂直居中效果

摘要：一如果是已知寬高的元素做水平垂直居中效果的話，可以直接用具體的數值指定定位布局或偏移布局，這個就不過多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實現方式。一、如果是已知寬高的元素做水平/垂直居中效果的話，可以直接用具體的數值指定定位布局或偏移布局，這個就不過多討論。這里主要介紹在不知寬高或需要彈性布局下的幾種實現方式。二、1.table表格法思路：顯示設置父元素為：tab...

Ilikewhite 2019-08-30 11:14 評論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結構上的導航欄和內容區域兩欄布局博客園為例騰訊課堂個人中心頁慕課網個人中心頁個人中心頁二版的結構三類似九宮格布局的兩列結構四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。目錄：一、大結構上的導航欄和內容區域兩欄布局1、博客園為例2、騰訊課堂個人中心頁3、慕課網個人中心頁4、github個人中心頁二、mini版的nav+cont結構三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
CSS3 垂直居中詳解

摘要：但要實現垂直居中確是一大難題。彈性盒子絕對定位視口單位彈性盒子彈性盒子應該是解決垂直居中的最佳方案，隨著的逐漸沒落，惹人煩的兼容性問題正逐漸被克服。里有一個和一個，想將這兩個元素在里垂直居中，同樣只需給它們的父元素設和。 CSS里實現水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。但要實現垂直居中確是一大難題。本...

DTeam 2019-08-29 11:09 評論0 收藏0