盒子垂直水平居中是前端開發(fā)中常見的需求之一。本篇文章將對CSS中常用的盒子水平垂直居中方式進(jìn)行簡單的介紹及展示。

1.使用table-cell

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

使用table-cell布局，通過設(shè)置元素為表格單元來實(shí)現(xiàn)水平垂直居中的效果，使用vertical-align:middle可以讓盒子垂直居中，使用text-align:center可以讓盒子水平居中。但是使用table-cell布局會使元素的樣式失效，還有其它兼容性問題，需要謹(jǐn)慎使用。

2.使用絕對定位和負(fù)邊距

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

將盒子的position屬性設(shè)置為relative，使其成為絕對定位的父級容器。使用絕對定位和top、left屬性將盒子定位在容器的中央。使用transform屬性將盒子向左和向上移動50%自身的寬高，來實(shí)現(xiàn)水平垂直居中的效果。

3.使用flexbox布局

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

使用flexbox布局可以很簡單地實(shí)現(xiàn)盒子的水平垂直居中。將盒子的display屬性設(shè)置為flex，使用justify-content:center和align-items:center屬性將盒子在容器中央居中對齊。

總結(jié)：

以上是CSS中常用的三種盒子水平垂直居中方式，靈活使用可以幫助開發(fā)者實(shí)現(xiàn)不同的需求。