前面的話

　　相對于水平居中，人們對于垂直居中略顯為難，大部分原因是vertical-align不能正確使用。實際上，實現垂直居中也是圍繞幾個思路展開的。本文將介紹關于垂直居中的5種思路

?

line-height

【思路一】： 行高line-height實現單行文本垂直居中

　　行內流傳著一種說法，單行文本垂直居中要將高度和行高設置成相同的值，但高度其實沒必要設置。實際上，文本本身就在一行中居中顯示。在不設置高度的情況下，行高撐開高度

<style> .test{line-height: 50px;background-color: lightblue; } </style> <div class="test">測試文字</div>

?

vertical-align?

【思路二】：設置vertical-align:middle實現垂直居中

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

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

　　[注意]若要IE7-瀏覽器支持，則可以將其改為<table>表格結構

　　[注意]設置為table-cell的div不能使用浮動或絕對定位，因為浮動或絕對定位會使元素具有塊級元素特性，從而喪失了table-cell元素具有的垂直對齊的功能。若需要浮動或絕對定位處理，則需要外面再套一層div

<style> .parent{display: table-cell;vertical-align: middle; } </style> <div class="parent" style="background-color: gray;height: 100px;"><div class="child" style="background-color: lightblue;">我是有點長的有點長的有點長的有點長的測試文字</div> </div>

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

　　vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2父元素中字母X的高度對齊。由于字符X在em框中并不是垂直居中的，且各個字體的字符X的高低位置不一致。所以，當字體大小較大時，這種差異就更明顯。當font-size為0時，相當于把字符X的字體大小設置為0，于是可以實現完全的垂直居中

<style> .parent{line-height: 100px;font-size: 0; } .child{vertical-align: middle; } </style> <div class="parent" style="background-color: lightgray;width:200px;"><img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test"> </div>

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

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

<style> .parent{height: 100px;font-size: 0; } .child{display: inline-block;font-size: 20px;vertical-align: middle; } .childSbling{display: inline-block;height: 100%;vertical-align: middle; } </style> <div class="parent" style="background-color: lightgray; width:200px;"><div class="child" style="background-color: lightblue;">我是比較長的比較長的多行文字</div><i class="childSbling"></i> </div>

?

absolute

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

【1】配合translate()位移函數

　　translate函數的百分比是相對于自身高度的，所以top:50%配合translateY(-50%)可實現居中效果

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

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

<style> .parent{position:relative; } .child{position: absolute;top: 50%;transform: translateY(-50%); } </style> <div class="parent" style="background-color: lightgray; height:100px;"><div class="child" style="background-color: lightblue;">測試文字</div> </div>

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

<style> .parent{position: relative; } .child{position: absolute;top: 0;bottom: 0;margin: auto 0;height: 50px; } </style> <div class="parent" style="background-color: lightgray; height:100px;"><div class="child" style="background-color: lightblue;">測試文字</div> </div>

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

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

?

flex

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

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

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

<style> .parent{display: flex;align-items: center; } </style> <div class="parent" style="background-color: gray; height: 100px;"><div class="child" style="background-color: lightblue;">測試文字</div> </div>

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

<style> .parent{display: flex; } .child{margin: auto 0; } </style> <div class="parent" style="background-color: gray; height: 100px;"><div class="child" style="background-color: lightblue;">測試文字</div> </div>

?

grid

【思路五】: 使用柵格布局grid實現垂直居中

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

【1】在網格容器上設置align-items或align-content

<style> .parent{display:grid;align-items:center;/*align-content:center;*/ } </style> <div class="parent" style="background-color: gray; height: 100px;"><div class="child" style="background-color: lightblue;">測試文字</div> </div>

【2】在網格項目中設置align-self或者margin: auto?0

<style> .parent{display:grid; } .child{align-self:center;/*margin: auto 0;*/ } </style> <div class="parent" style="background-color: gray; height: 100px;"><div class="child" style="background-color: lightblue;">測試文字</div> </div>

?

轉載于:https://www.cnblogs.com/xiaohuochai/p/5438791.html

總結

以上是生活随笔為你收集整理的CSS实现垂直居中的5种思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。