水平垂直居中方式小结

话不多说~直接来看demo吧

1、不定宽高的水平垂直居中：

.box {
    position: absolute;
    top: 50%;
    left: 50;
    z-index: 3;
    -webkit-transform: translate(-50%,-50%);
}

 

2、flex版本的水平垂直居中：

.parent {
    justify-content: center;  //子元素水平居中
    align-items: center;    //子元素垂直居中
    display: -webkit-flex
}

 

3、绝对定位方式：

.Center-Container {
  position: relative;
}
 
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

未完待续。。。。。。

相关博客：http://www.cnblogs.com/2050/p/3392803.html