各种元素居中方法，掌握即可无惧所有元素居中

已经大小的元素在浏览器可视窗口中水平垂直居中

根据固定定位（fixed）的特性，固定定位的参考对象是浏览器的窗口，因此left和top各设置50%，并且left和top再往回移动已知元素大小的一半即可。
代码如下：

结果如下：

未知大小的元素在浏览器可视窗口中水平垂直居中

由于元素大小未知，根据固定定位的特性，将元素距离上右下左的距离设为0，然后再设置margin为auto（自适应）即可。
代码如下：

结果如下：

已知大小的元素在父元素中水平垂直居中方法

此种情况跟前面已知大小元素在可视窗口居中的方法差不多，但值得注意的是，由于子元素div设置了绝对定位，其父元素一定要设置相对定位（父相子绝），这样元素的参考对象就改为该元素的父元素了。
代码如下：

结果如下：

未知大小的元素在父元素中水平垂直居中方法一

由于元素大小是未知的，所以我们需要一个span来设置参考线，span里面千万不能放任何内容，
然后我们只要将这个参考线height设置为100%，然后让未知大小元素参照span居中即可。
代码如下：

结果如下：

未知大小的元素在父元素中水平垂直居中方法二

将父元素转换为table-cell，然后进行垂直居中即可。
注：
1.不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效，响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度

代码如下：

结果如下：

**以上是小白我对元素居中的一些总结，望能够对你们有用处！**