常用css的開發人員都知道讓單行文字水平居中用text-align:center垂直方向居中有一個小技巧是讓line-height=height,一般用到這個的時候我們的高度都是固定的px值,但今天我設置高度為百分比時,也想讓文字垂直居中,於是有了下面這段代碼
<!DOCTYPE html>
<html>
<head lang="en">
<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%