行高line-height實現單行文字垂直居中
以前一直認為單行文字垂直居中要將高度和行高設定成相同的值，但高度其實沒必要設定。實際上，文字本身就在一行中居中顯示。在不設定高度的情況下，行高撐開高度。
測試文字
設定vertical-align:middle實現垂直居中
設定父元素的display為table-cell
通過為table-cell元素設定vertical-align:middle，可使其子元素均實現垂直居中。這和**裡單元格的垂直居中是類似的
[注意] 若要ie7-瀏覽器支援，則可以將其改為
**結構
[注意] 設定為table-cell的div不能使用浮動或絕對定位，因為浮動或絕對定位會使元素具有塊級元素特性，從而喪失程式設計客棧了table-cell元素具有的垂直對齊的功能。
若需要浮動或絕對定位處理，則需要外面再套一層div。
我是有點長的有點長的有點長的有點長的測試文字
若子元素是，通過設定父元素的行高來代替高度，且設定父元素的font-size為0。
vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2 父元素中字母x的高度對齊。由於字元x在em框中並不是垂直居中的，且各個字型的字元x的高低位置不一致。
所以，當字型大小較大時，這種差異就更明顯。當 font-size為0時，相當於把字元x的字型大小設定為0，於是可以實現完全的垂直居中。
通過新增元素來實現垂直居中的效果
新增元素設定高度為父級高度，寬度為0，且同樣設定垂直居中vertical- align:middle的inline-block元素。由於兩個元素之間空白被解析，所以需要在父級設定font-size:0，在子級再將 font-size設定為所需值；若結構要求不嚴格，則可以將兩個元素一行顯示，則不需要設定font-size:0。
www.cppcns.comquot;parent" style="background-color: lightgray; width:200px;">
我是比較長的比較長的多行文字
思路三：通過絕對定位實現垂直居中
若子元素不定高， 使用top50%配合translatey(-50%)可實現居中效果。
translate函式的百分比是相對於自身高度的，所以top:50%配合translatey(-50%)可實現居中效果。
[注意] ie9-瀏覽器不支援；
[注意]若子元素的高度已知，translate()函式也可替換為margin-top: 負的高度值。
測試文字
若子元素定高，結合絕對定位的盒模型屬性，實現居中效果
測試文字
關於增加div
在水平居中對齊中，元素外層套一層div並設定absolute，元素設定負margin-left或者relative的負left屬性，可以實現水平居中的效果。但由於margin是相對於包含塊寬度的，這樣margin-top:-50%得到的是寬度而不是高度的-50%，所以不可行；對於relative的百分比取值而言，在包含塊高度為auto的情況下，chrome、safari和ie8+瀏覽器都不支援設定元素的百分比top值，所以也不可行。
思路四：使用彈性盒模型flex實現垂直居中
[注意] ie9-瀏覽器不支援
在伸縮容器上設定側軸對齊方式align-items: center
測試文字
在伸縮專案上設定margin: auto 0
測試文字
總結以上所述是小編給大家介紹的css實現垂直居中的4種思路詳解，希望對大家有所幫助，如lafrefqi果大家有任何疑問請給我留言，小編會及
時回覆大家的。在此也非常感謝大家對我們**的支援！
本文標題: css實現垂直居中的4種思路詳解
本文位址: /web/css/85414.html
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：css實現垂直居中 實現垂直居中
用css樣式生成搜尋、購物車等圖示樣式(圖示字型庫)利用css3如何設定沒有上下邊的列表間隔線
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
© 2018-2021 程式設計客棧 贛icp備17006162號-9
贛公網安備 36110202000251號
top
CSS實現垂直居中的4種思路
以前一直認為單行文字垂直居中要將高度和行高設定成相同的值，但高度其實沒必要設定。實際上，文字本身就在一行中居中顯示。在不設定高度的情況下，行高撐開高度。test style class test 測試文字div 設定父元素的display為table cell 通過為table cell元素設定ve...
CSS實現水平垂直同時居中的6種思路
style test style div class test style background color lightblue width 200px 測試文字 div 思路二 text align vertical align 在父元素設定text align和vertical align，並將...
5種實現垂直居中css
在我們製作頁面的時候經常會遇到內容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優缺點，可以選擇自己喜歡的方式。以下 都經過本人親自測試。style content style div class content vertical align middle div style con...