水平居中
行內或類行內元素水平居中
在塊級父容器中設定text-align:center
塊級元素水平居中
塊級元素設定margin-left
和margin-right
為auto
(前提是已經為元素設定了width
)
flex佈局實現(多個水平排列元素)水平居中
display: flex;
justify-content: center;
flex佈局實現(多個垂直排列元素)水平居中
display: flex;
flex-direction: column;
align-items: center;
絕對定位實現水平居中
width: 寬度值;
position: absolute;
left: 50%;
transform: translateX(-50%); 或者 margin-left: -寬度值的一半;
垂直居中
單行行內元素或單行類行內元素垂直居中
設定父容器的height
和line-height
為相同的值
height: 50px;
line-height: 50px;
使用table-cell
多行文字垂直居中
<div class="container">
<p>React 起源於 Facebook 的內部專案,用來架設 Instagram 的網站,並於 2013 年 5 月開源。React 擁有較高的效能,程式碼邏輯非常簡單,越來越多的人已開始關注和使用它</p>
</div>
.container {
width: 200px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
}
使用flex
實現垂直居中
display: flex;
flex-direction: column;
justify-content: center;
或者
display: flex;
align-items: center;
利用偽元素實現垂直居中
<div class="container">
<p>React 起源於 Facebook 的內部專案,用來架設 Instagram 的網站,並於 2013 年 5 月開源。React 擁有較高的效能,程式碼邏輯非常簡單,越來越多的人已開始關注和使用它</p>
</div>
注意:上面的例子中必須為p元素設定寬度,並且寬度必須小於父容器的寬度
.container {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.container p {
width: 190px;
display: inline-block;
vertical-align: middle;
}
.container:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
絕對定位實現垂直居中
position: absolute;
top: 50%;
transform: translateY(-50%); 或者 margin-top: -自身高度的一半;