CSS塊水平垂直居中是在頁面布局中必須掌握的一項(xiàng)技能。在實(shí)際開發(fā)中，我們常需要使一個塊元素在另一個塊元素中居中。下面介紹幾種實(shí)現(xiàn)方式。

方法一：使用position和transform

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

方法二：使用flex

.parent{
display:flex;
justify-content:center;
align-items:center;
}

方法三：使用table和table-cell

.parent{
display:table;
}
.child{
display:table-cell;
vertical-align:middle;
text-align:center;
}

方法四：使用margin

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;/*此處50px是child元素高度的一半*/
margin-left:-50px;/*此處50px是child元素寬度的一半*/
}

以上四種方法均可實(shí)現(xiàn)CSS塊水平垂直居中。然而在實(shí)際開發(fā)中，需要根據(jù)具體情況選擇不同的方法。有些場景下，需要支持更低版本的瀏覽器，此時需要注意兼容性問題。