頁面居中,各種元素居中是我們開發是很常見的情況,下面就來討論下水平居中,垂直居中以及水平加垂直居中都有哪些常見的方案。我們的目標是對齊下面這兩個div:
<div class="parent">
<div class="child">
DEMO
</div>
</div>
複製程式碼
為了看清楚,我們給父級一個淺灰的背景,子級一個深灰的背景,開始時我們什麼樣式都不寫,是下面這樣的,子級會預設給父級撐滿:
水平居中
text-align + inline-block
.parent{
/* text-align會對inline的子級生效,設定為center就會水平居中 */
text-align: center;
}
.child{
/* display設定為inline-block子級就不會撐滿父級,而是自適應內容 */
display: inline-block;
/* text-align會繼承,child的子級也會水平居中,如果我們想恢復預設,手動寫為左對齊就行了 */
text-align: left;
}
複製程式碼
table + margin
.parent2 {
}
.child2 {
/* display設定為table,如果不指定寬度,寬度就是自適應內容 */
display: table;
/* display如果是table,margin auto就可以生效 */
/* 如果沒有設定display為table,margin auto不能生效*/
margin: 0 auto;
}
/* 如果知道子元素寬度,可以直接應用margin auto */
複製程式碼
上面這個方法適合父級元素寬度不固定,子級元素寬度也不固定的情況。如果知道子級元素的寬度就很簡單了,直接應用margin auto即可:
.parent2 {
}
.child2 {
width: 100px;
margin: 0 auto;
}
複製程式碼
absolute + transform
.parent4 {
/* 父級設定relative好讓子級absolute相對於父級定位 */
position: relative;
}
.child4 {
position: absolute;
/* left 50%會讓子級在正中稍微靠右一點 */
left: 50%;
/* translateX百分比相對的是自身,因為前面靠右了,往左挪一點 */
/* 挪的位置剛好是自身寬的一半*/
transform: translateX(-50%);
}
複製程式碼
flex + justify-content
這應該是最簡單的一種方式了,直接在父級定義justify-content center就行了。
.parent5 {
display: flex;
justify-content: center;
}
.child5 {
}
複製程式碼
flex + margin
flex元素也可以支援margin auto, 所以可以這樣寫
.parent51 {
display: flex;
}
.child51 {
margin: 0 auto;
}
複製程式碼
垂直居中
table-cell + vertical-align
vertical-align在table-cell裡面生效,所以在給父級設定table-cell,然後vertical-align設定為middle就行了。
.parent6 {
display: table-cell;
vertical-align: middle;
}
.child6 {
}
複製程式碼
absolute + transform
與水平居中類似,父級設定為relative,子級設定為absolute,top設定為50%,這樣會讓位置稍微偏下一點,用transform往上挪一點。
.parent7 {
position: relative;
}
.child7 {
position: absolute;
top: 50%;
/* translateY百分比也是相對於元素自身計算的 */
transform: translateY(-50%);
}
複製程式碼
flex + align-items
這個應該是最簡單的了,直接在父級設定flex和align-items: center;
.parent8 {
display: flex;
align-items: center;
}
.child8 {
}
複製程式碼
水平垂直居中
水平垂直居中直接將前面的水平居中和垂直居中結合起來就行了。
text-align + inline-block + table-cell + vertical-align
.parent9 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child9 {
display: inline-block;
}
複製程式碼
absolute + transform
前面水平居中,垂直居中都有absoluate + transform方案,結合起來就可以水平垂直居中了:
.parent10 {
position: relative;
}
.child10 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
複製程式碼
flex
又看到了我們最喜歡的flex了,做居中不要太簡單!
.parent11 {
display: flex;
justify-content: center;
align-items: center;
}
.child11 {
}複製程式碼
示例程式碼:
原創不易,每篇文章都耗費了作者大量的時間和心血,如果本文對你有幫助,請點贊支援作者,也讓更多人看到本文~~
更多文章請看我的掘金文章彙總