(1)偏移量解決
思路:
首先水平方向居中margin: 0 auto,不必多說
其次讓居中元素脫離文檔流,使它距離top50%,這樣的結果就是元素本身的頂部到達盒子的中間
position: relative;//脫離文檔流
top: 50%;//設置top50%一半
最後:再把元素本身上移本身的一半就實現了垂直居中(爲什麼是一半的高度?因爲剛剛偏移了50%頂部在中間,多移了元素本身高度的一半,所以再移回去本身高度的一半即可)
margin-top: -100px;//上縮一半
完整:
html
<div class="box">
<div class="item"></div>
</div>
css:
.box{
height: 500px;
width: 500px;
background-color: #409eff;
border: 1px solid;
}
.item{
height: 200px;
width: 200px;
background-color: #999;
margin: 0 auto;//水平方向居中
position: relative;
top: 50%;//設置top50%一半
margin-top: -100px;//上縮一半
}
(2)css3實現:
transform: translateY(-50%);思路如上是使得div向上平移(translate)自身高度的一半(50%)
代碼:
html
<div class="box">
<div class="item"></div>
</div>
css:
.box{
height: 500px;
width: 500px;
background-color: #409eff;
border: 1px solid;
}
.item{
height: 200px;
width: 200px;
background-color: #999;
margin: 0 auto;//水平方向居中
position: relative;
top: 50%;//設置top50%一半
transform: translateY(-50%);//上縮一半
}
(3)利用flex。(也是最簡單的)
<div class="box">
<div class="item"></div>
</div>
.box {
height: 500px;
width: 500px;
background-color: #409eff;
border: 1px solid;
display: flex;
align-items: center; /*定義body的元素垂直居中*/
justify-content: center; /*定義body的裏的元素水平居中*/
}
.item {
height: 200px;
width: 200px;
background-color: #999;
}