元素水平垂直居中_元素需要在垂直方向居中,应该怎么编写代码?

无论是实际开发中，还是职场的面试，水平垂直居中都是非常常见的一个需求和问题。 为了行文方便，先来说明一些公共代码：

<div class='wrap'>
 <div class='box size'>Jonas Von</div>
</div>

样式公共代码：

.wrap{
 border: 1px solid rebeccapurple;
 width: 300px;
 height: 300px;
}
.box{
 background-color: pink;
}
.box.size{
 width: 100px;
 height: 100px;
}

在我的认知里面，实现元素水平垂直居中大致有两类方法，一类是通过绝对定位+实现的，另外一类就是 flex 布局。

绝对定位 + 负margin

//省略公共样式
.wrap{
    position: relative;
}
.box{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

绝对定位让子元素的左上角定位到父容器的中心点，接着通过负外边距让子元素往回跑自身容器宽/高的一半。这种方式的缺点是需要知道子元素的宽高。

绝对定位 + 计算属性 calc

.wrap{
    position: relative;
}
.box{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

这种方式的缺点跟上面的一致，就是需要知道子元素的宽高；然而还要考虑兼容性的问题，所以慎用。

绝对定位 + margin:auto

.wrap{
    position: relative;
}
.box{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

要是没有 margin:auto ，子元素将充满整个父元素，这种方式的灵魂就在于 auto。

绝对定位 + transform

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

现代网页布局解决方案 —— flex

如果用 flex 实现水平垂直居中，那实在是太简单了，三行代码：

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

将父容器设置为 flex 容器，接着，让主、侧轴元素居中显示即可。