CSS盒子水平垂直居中常用的写法

摘要

本文简单归纳一下让盒子水平垂直居中的写法...

1、通过position定位与margin:auto实现

• （1）给父元素设置相对定位

• （2）给子元素（要垂直水平居中的元素）设置为绝对定位，再将子元素设置外边距为 auto、子元素设置上下左右位置为0

.parent_box {    position: relative;    width: 100px;    height: 100px;    border: 1px solid #000000;}
.child_box {    position: absolute;    margin: auto;    top: 0;    left: 0;    right: 0;    bottom: 0;    width: 66px;    height: 66px;}

<div class="parent_box">    <div class="child_box ">    </div></div>

2、通过position与transform实现

(1)、通过决对定位让和 left: 50%;让子盒子偏移父盒子宽度的一半，此时子盒子的左边就在父盒子的正中间，再通过设置子盒子的 transform: translateX(-50%)即向左移动回自身的一半,即后达到水平居中 (2)、垂直方向同理

.parent_box {    position: relative;}.child_box {    position: absolute;    left: 50%;    top: 50%;    /* 向x和Y轴移动盒子本身的一半*/    transform: translateX(-50%) translateY(-50%);}

3、通过position与负margin实现

(1)、通过决对定位让和 left: 50%;让子盒子偏移父盒子宽度的一半，此时子盒子的左边就在父盒子的正中间，再通过设置子盒子的左外边距负本身的一半即向左移动回自身的一半后达到水平居中 (2)、垂直方向同理

.parent-box {    position: relative;}.child-box {    position: absolute;    left: 50%;    top: 50%;    width: 66px;    height: 66px;    /*相当于向上再移动盒子的一半高度*/    margin-top: -33px;     /*相当于向左再移动盒子的一半宽度*/    margin-left: -33px;}

4、通过flex布局实现

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

5、通过table-cell布局实现

（1）、display:table-cell;与vertical-align:middle; 的作用是让子盒子在竖直方向上居中 （2）、margin:auto;则让子盒子在水平方向居中

.parent-box {    display: table-cell;    vertical-align:middle;}.child-box {    margin: auto;}

6、通过display:inline-block实现

（1）、父盒子设置text-align:center;让子盒子水平居中

（2）、父盒子的行高设置成父盒子一样的高度line-height:500px 与子盒子的vertical-align:middel（该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式为居中对齐）共同作用使子盒子垂直居中。

.parent-box {    height: 500px;    line-height: 500px;    text-align:center;}.child-box {    display:inline-block;    vertical-align:middle;    line-height:1rem;    color:#fff;}