常用css的開發人員都知道，讓單行文字水平居中用text-align:center，垂直方向居中有一個小技巧是讓line-height=height,一般用到這個的時候我們的高度都是固定的px值,但今天我們設置高度為百分比時,也想讓文字垂直居中,于是有了下面這段代碼。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html,body{ margin: 0; height: 100%; } #container{ width: 100%; height: 100%; background: #888888; } #content{ width: 50%; height: 50%; font-size: 100px; text-align: center; background: #0000ff; } </style> </head> <body> <div id="container"> <div id="content"> HELLO WORLD </div> </div> </body> </html>
此時沒有設置任何讓它垂直居中的樣式, 運行如下
然後利用line-height:50%,看看發生什麼。
看上面效果，其實并不是我截圖截丢了一塊,然後發現字體向上移了一部分,原因是line-height的百分比是相對于font-size的,所以你如果使用line-height居中的話,就必須使用絕對的px值。
那麼如何解決呢？看以下方法。
方法一:
增加一個父元素,給父元素設置display:table,給需要居中的元素設置vertical-align:middle;display:table-cell;
方法二:
給需要居中的元素加以下代碼樣式和display:flex;justify-content:center;align-items:center;
兩種方法在不同場景都有一定程度的問題,需根據實際情況确定。
小技巧tips:
設置高度寬度百分比時,百分比時相對于父元素來确定,承接父元素的百分比,相對于浏覽器屏幕大小時,必須給html,body設置顯性百分比100%。
不知大家在開發中是如何解決的呢？或者有更好的方法，歡迎大家留言讨論。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
