高度自適應的水平垂直居中布局
高度自適應實現水平垂直居中
方法一
CSS3中有transform屬性,此屬性下有一個translate移動函數,此函數接受兩個參數。如果兩個參數都為百分比值,此時會基於自身寬度和高定進行移動。此函數移動的機制同position:relative
相似。
<div class="container">Hello World!</div>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // 自身寬度和高度的一半
border: 1px solid red;
}
優點:無需定高度。高度隨內容自適應。
缺點:元素脫離文檔流。如果需要居中的元素已經在高度上超過了視口,那它的頂部會被視口裁切掉。
方法二
我們知道,可以使用margin來實現水平居中對齊,而無法使用margin實現垂直居中的原因在於margin的百分比值是基於寬度計算的。
<div class="container">Hello World!</div>
.container {
width: 300px;
margin: 50% auto 0;
border: 1px solid red;
tarnsform: translateY(-50%);
}
上面代碼中,由於百分比是基於父元素(此時的父元素為body元素)的寬度計算的,所以此時的50%加上translate負值並不能實現垂直居中布局。
不過,CSS中存在一個vh(視口高度),也就相當於DOM中document.body.clientHeight
或者document.documentElement.clientHeight
的高度,1vh=1%,即1vh等於視口高度的1%。vh單位的瀏覽器兼容性問題可看vh。因此,以上代碼可改為如下,即可實現水平垂直居中效果。
<div class="container">Hello World!</div>
.container {
width: 300px;
margin: 50vh auto 0;
transform: translateY(-50%);
border: 1px solid red;
}
方法三
CSS3中存在flex布局(伸縮布局盒模型,也叫彈性布局盒模型),對於flex熟悉的朋友來說,使用flex實現水平垂直居中是再簡單不過的了。
<div class="container">
<div class="inner">
<p>hello world!</p>
</div>
</div>
.container {
display: flex;
height: 100vh;
}
.inner {
margin: auto;
}
當我們使父元素display: flex
時,margin: auto
不僅可以水平居中,也能夠實現垂直居中。這是因為auto外邊距會平分水平或垂直方向上的額外空間。
當然,也可以使用justify-content: center
來定義彈性項目主軸的對齊方式,align-items: center
來定義彈性項目側軸的對齊方式。
<div class="container">
<div class="inner">
<p>hello world</p>
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
方法四
可以使用display: table
來模擬表格,並給子元素設置display: table-cell
,讓其成為表格的某個單元格,同時設置vertical-align: middle
,即可實現垂直居中布局
<div class="container">
<div class="inner">
hello world!
</div>
</div>
.container {
display: table; /* 讓div以表格的形式渲染 */
width: 100%;
border: 1px solid red;
}
.inner {
display: table-cell; /* 讓子元素以表格的單元格形式渲染 */
text-align: center;
vertical-align: middle;
}
使用此種方式,不需要固定高度。只需要給定任意高度或者不給高度,即可實現水平垂直居中對齊
高度自適應的水平垂直居中布局