请把它居中！

水平和垂直居中还是分开来讲。水平居中方法很多：1.text-align 2.margin3.绝对定位4.flex。前两种兼容性最好的，基本上能解决所有的水平居中问题了，flex用起来很爽，但是有兼容性的问题，所以使用那种方法视情况而定吧。

水平居中垂直居中方法：
1. flex方法
2. 绝对定位
3. table方法
4. 用伪元素辅助垂直居中其中。
同样flex有兼容性问题，后三种方法兼容性较好。第四种处理的方法思想很好，可以为其他疑难杂症那个提供一个解决问题的思路。

水平居中

1.text-align

p{
    text-align:center;
}

这种方式是处理行内元素的居中，只能应用于display为inline，inline-block的元素居中。样式是写在居中元素的父元素上。

2.margin

div{
    margin: 0 auto;
}

这种方法是应用与块级元素，也就是display为block的元素上。样式写在要居中的元素上。

3.absolute

div{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

这种方法在水平居中不常用，通常是要垂直水平全部居中，应用于块级元素。代码如下：

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

其思路是这样的：首先设置为绝对定位，元素的左上角应父级定位元素的中心位置，绝对定位的宽高百分比是以其父级已经定位的元素的宽高为基数。然后再往回XY分别偏移50%，translate的参照是元素的本身，所以元素会垂直水平都居中（要居中的元素其父元素要设置定位）。这里的translate会有部分兼容问题，可以使用margin-top:-50%;margin-left:50%;作为替代方案。

4.flex

flex布局很强大，不过兼容性的问题也是很坑爹的。通常用于水平垂直都是居中的布局。
用法如下：首先设置要居中的元素的父元素为

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

就是这么强大。兼容性不好。

垂直居中

垂直居中的方法1和方法2我们在上面的水平居中已经用了
所以就直接进入兼容性比较好的方法三、四。

table

核心代码

div.parent{
    display:table;
}
div.child{
    display:table-cell;
    vertiacl-align:middle;
}

其中，设置要居中的元素的外层为table设置里面元素为table-cell。。此方法兼容性很好

伪元素做辅助

核心代码：

.parent:before{
    content:'';
    display: inline-block;
    width:0px;
    overflow:hidden;
    height: 100%;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

这种方法实际上是使用一个元素做辅助，把行高撑开到100%，在设置行内垂直居中对齐。
如果考虑兼容，则可以在html文档中添加一个元素来做辅助，而不是用伪元素。
关于处理布局细节问题，通过一个元素来辅助的思想确实能让人豁然开朗。后面我还会写一篇关于，如何设置一个div为自适应的正方形，同样使用了这个思想。