怎样实现CSS水平垂直居中

1.使用绝对定位，top、right、bottom、left值相等，margin为auto

需要注意的是：top、left、right、bottom的值不一定要为0，只要保持这四者的值相等即可，另外，margin:auto;属性也是必须的条件，否则无法实现效果

2.使用绝对定位，top、left的值为50%，对应的margin为元素宽高的一半

对于此思路的扩展，使用transform属性的变形也能达到同样的效果，即将上面的margin属性替换成：transform:translate(-50%,-50%)即可

3.使用flex的相关属性

但是这种思路的缺陷很明显，就是必须要明确父级容器的高度
另外，利用此属性的另外一种解决思路：

flex属性在移动端使用起来极为便利，移动端首选这种方式

4.使用table相关属性

此种方式能兼容较低版本的IE浏览器，但是table布局早已过时