划重点！！！！！！这是一道面试必问题。实现效果图如下所示。

这个问题分为两种情况：

居中元素定宽高
居中元素不定宽高

居中元素定宽高

公共代码

在实现上述效果之前，需要先准备两个div，以下是公共代码，后面的代码都在这个代码的基础上添加

    <div class="box">
      <div class="inner">水平垂直居中</div>
    </div>

      /* 公共代码 */
      .box {
        border: 1px solid red;
        width: 300px;
        height: 300px;
      }

      .inner {
        width: 100px;
        height: 100px;
        background: green;
      }
      /* 公共代码 */

absolute+负margin

思路

第一步先给子元素定位

/* 定位代码 */
.box {
    position: relative;
}
.inner {
    position: absolute;;
    top: 50%;
    left: 50%;
}

通过这个图可以看出，绝对定位是基于子元素的左上角，绝对定位的百分比是相对于父元素的宽高。

定位之后，并不是垂直居中的，需要将绿色中心点位置向上和向左移动，移动的距离就是绿色宽高的一半

第二步，用外边距来移动绿色div，就可以垂直居中了

缺点是需要知道子元素的宽高

完整代码

/* 定位代码 */
.box {
    position: relative;
}
.inner {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

absolute+calc

什么是calc

calc的语法就是简单的四则运算，

使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

思路

上面用负margin的写法也可以改为用css的计算属性calc实现，既然top的百分比是基于元素的左上角，那么再减去元素宽度的一半就好了

/* 定位代码 */
.box {
    position: relative;
}
.inner {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
/*calc(50% - 50px)表示父元素的50%-50px */

absolute+margin auto

这种方式通过设置各个方向的距离都是0，此时再将margin设为auto，就可以在各个方向上居中了

完整代码

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

居中元素不定宽高

下面的方法不需要子元素固定宽高，所以公共代码的css部分需要删除子元素的宽高

      /* 公共代码 */
      .box {
        border: 1px solid red;
        width: 300px;
        height: 300px;
      }

      .inner {
        background: green;
      }
      /* 公共代码 */

absolute+transform

思路

元素定位

.box {
    position: relative;
}
.inner {
    position: absolute;;
    top: 50%;
    left: 50%;

向左和向上移动自身宽高的50%

.box {
    position: relative;
}
.inner {
    position: absolute;;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*translate(-50%,-50%) 作用是，往上（x轴）,
    左（y轴）移动自身长宽的 50%，以使其居于中心位置。 */

table布局

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.inner {
    display: inline-block;
}

flex布局

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

总结

PC端有兼容性要求，宽高固定，推荐absolute + 负margin
PC端有兼容要求，宽高不固定，推荐css-table
PC端无兼容性要求，推荐flex
移动端推荐使用flex

css布局篇——水平垂直居中