纯css实现元素水平垂直居中

        在前端页面布局的时候，我们需要对某个元素进行相对于其父元素或整个文档进行水平垂直居中的显示布局。

而如何快速的运用css进行相对于的布局，这里，总结了三种方法。

       

1、position

这里父元素只需要给它一个定位的属性就行，在子元素下设置相对定位，这里有两种写法，第一种就是没有注释的，把left，right，top，bottom设置为0，再设置margin为auto即可。第二种就是已经注释的，设置left和top为50%，因为是相对于元素的右上角为原点的，这里就需要再通过translate偏移自身宽高的一半来使它正好位于父元素的中心。这里不建议使用第二种，在第二种的情况下，如果再需要使用transform的其他属性，如rotate，会产生一些bug。而效果如下：

2、display

这里用的是display，display设为table-cell，在设置vertical-align为middle，这设置的是垂直居中，text-align设置为center设置的是水平的居中。这里需要注意两点，vertical-align只有在设置了display为table-cell时才有效。text-align只有在子元素不为块级元素时才有用，即子元素设置display为inline-block。（补充：这里也可以不用text-align，那么就需要在子元素下设置margin：auto）

3、flex

这一种使用的是弹性布局，把父元素设置为容器display：flex；在容器中设置项目在主轴的对其方式justify-content：center，设置在交叉轴的对齐方式为align-items：center。

        以上都是在不知道元素宽高情况下实现的，如果知道元素宽高，则可以通过margin等计算来实现。