垂直水平居中的幾種方法
阿新 • • 發佈:2018-12-20
1. margin:auto
.father {
width: 300px;
height: 300px;
background: yellow;
position: relative;
}
.son {
width: 200px;
height: 200px;
background: blue;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
效果圖: 當元素絕對定位時,它會根據離他最近的一個非static定位的父元素進行定位,這裡應該根據父元素定位。
2. 負margin
.father {
width: 400px;
height: 300px;
background: yellow;
position: relative;
}
.son {
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top : -100px;
margin-left: -100px;
}
效果圖:
首先用top:50%;
和left:50%;
讓子元素的座標原點(左上角)移動到父元素的中心,然後再利用負margin
讓它往左偏移自身寬的一半,再往上偏移自身高的一半,這樣子元素的中心點就跟父元素的中心點對齊了。
這種情況只適用於子元素自身的寬高已知的情況,若寬高不確定,如子元素為文字,則寬高由內容確定,可以使用下面的方法:
3.transform()
.father {
width: 300px;
height: 300px;
background : yellow;
position: relative;
}
.son {
background: pink; /*為了觀察方便設定顏色*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
效果圖:
子元素設定相對於父元素進行絕對定位,首先將子元素左上角定位到父元素中心,即使用top:50%
和left:50%
定位到中心,然後使用translate()
相對於自身的高寬的一半進行移動,即可把自己的中心移到父元素的中心。
這裡用到的原理是translate函式中的百分比是相對於元素自身的高寬來計算的。
4.flex
方法一:
當父元素設定為display:flex
後,子元素設定margin:auto
就可以相對於父元素在垂直和水平方向進行居中。
.father {
width: 200px;
height: 200px;
background: yellow;
display: flex;
}
.son {
margin: auto;
}
效果圖:
方法二: 也可以使用flex的容器屬性直接給父元素設定屬性讓其內的專案居中:
.father {
width: 200px;
height: 200px;
background: yellow;
display: flex;
align-items:center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
效果圖: