css实现div水平、垂直居中兼容chrome、ie8

要实现div水平、垂直居中，可以使用以下3种方式：

1.使用flex布局

.container {
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
}

这种方式是比较简单的方式，在现代浏览器中支持度较好，但在IE8中并不支持。

2.使用绝对定位和margin负值

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这种方式则是使用绝对定位和margin负值来实现的，在各浏览器中的兼容性都比较好。以上两种方法分别理解即可，下面让我们来看针对chrome和ie8的实现方式

3.针对chrome和ie8的实现方式

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /*.box的一半高度*/
  margin-left: -50px; /*.box的一半宽度*/
}
@media screen\0 { /*IE8及以下浏览器特殊样式，\0为hack写法*/
  .box {
    top: 50%;
    left: 50%;
    margin-top: -100px; /*.box的高度*/
    margin-left: -100px; /*.box的宽度*/
  }
}

以上为一种兼容IE8和chrome的方式，使用了@media screen\0的hack写法，使得样式只有在IE8及以下浏览器中生效。而其他浏览器则会忽略掉该hack写法，不会造成影响。

另外一种示例也是类似的，但是样式略有不同：

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
@media screen\0 { /*IE8及以下浏览器特殊样式，\0为hack写法*/
  .box {
    top: 50%;
    left: 50%;
    margin-top: -100px; /*.box的一半高度*/
    margin-left: -100px; /*.box的一半宽度*/
  }
}

以上方式使用了top、left、right、bottom属性来实现div的水平、垂直居中，并使用margin: auto来让div实现水平居中。同时也使用@media screen\0的hack写法来实现在IE8及以下浏览器中的兼容。