我们日常使用 css 时，经常会遇到居中问题，本文总结了一些简单易用的垂直居中、水平居中的技巧。

父级使用 text-align:center

父级使用 text-align:center，属性使所有子文本内容水平居中，这是最简单的一种水平居中方式，写法如下：

body{
    text-align:center;
}

margin 属性

利用 margin 属性，上外边距设置为 0，左右自适应，需要指定宽度，这是最普遍的一种水平居中方式，写法如下：

div{
    width:400px;
    margin:0 auto;
}

flex 弹性布局

父级 div 设置 flex 弹性布局（浏览器需要支持 H5）使所有子内容垂直水平居中，写法如下：

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

table 属性

利用 display:table 的单元格属性使其子级垂直水平居中，写法如下：

div{
    display:table;
}
.son{
    display:table-cell;
    vertical-align:middle;
}
.grandSon{
    width:50%;
    margin:0 auto;
}

结合 position 和 translate 属性

设置 position 属性分别向上和左偏移 50% 的距离，然后设置 translate 属性分别向 x 轴 和 y 轴偏移 -50%，达到垂直水平居中效果。

这种方式适合在移动端或者没有固定宽高的情况下使用，写法如下：

div{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

填充父级所有可用空间

设置 position 属性，上下左右均为 0（脱离文档流，并使其填充父级所有可用空间），然后给 div 设置宽高，防止其占用父级所有可用空间，最后再设置margin:auto（等同于 margin-top:0;margin-bottom:0）使浏览器重新计算外边距，以达到垂直水平居中效果，写法如下：

div{
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    width: 400px;
    height: 300px;
    margin: auto;
}

结合 position 和 margin 属性

设置 position 属性分别向上和左偏移 50% 的距离，然后再设置 margin 属性，分别向上偏移负的 div 总宽度的一半，向左偏移负的 div 总高度的一半。

这种方式适合已经设置了 div 的宽高并且需要定位垂直水平居中的情况，写法如下：

div{
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -150px;
}