兽性总裁的爱奴,国际完美世界下载,完美世界

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS怎樣實現(xiàn)垂直居中

小編給大家分享一下CSS怎樣實現(xiàn)垂直居中，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務器托管報價，主機托管價格性價比高，為金融證券行業(yè)服務器托管，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

行高line-height實現(xiàn)單行文本垂直居中

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


測試文字

CSS怎樣實現(xiàn)垂直居中

設置vertical-align:middle實現(xiàn)垂直居中

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

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

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

表格結構

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

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



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

CSS怎樣實現(xiàn)垂直居中

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

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

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

CSS怎樣實現(xiàn)垂直居中

【3】通過新增元素來實現(xiàn)垂直居中的效果

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



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

思路三：通過絕對定位實現(xiàn)垂直居中

【1】若子元素不定高，使用top50%配合translateY(-50%)可實現(xiàn)居中效果。

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

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

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



  測試文字

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



  測試文字

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

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

思路四：使用彈性盒模型flex實現(xiàn)垂直居中

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

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