css水平垂直居中

前段时间在开发小程序的过程中，遇到了关于传统居中实现方式问题。什么是我理解的传统居中呢？就是学习前端基础的时候，第一想到的居中方式。根据“子绝父相定位居中”

子绝父相定位居中

.box{
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
  background-color: red;
}

请注意：这样的写法，通过改变盒子的定位方式，原本在页面开发是并不提倡，而且在小程序开发过程中有明显的兼容性问题。

那么还有什么实现盒子居中的方法吗？当然有啦，就是自2015年就开始逐渐流行的弹性盒子flex布局。

flex布局实现元素居中 

.body{
  display: flex;
  display:  -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content:center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: yellow;
  .box{
    width: 500px;
    height: 500px;
    background-color: red;
  }
}

注意哦：我在父盒子中使用了height:100vh；vh是（viewheight）可视容器盒子的缩写；这样的写法就可以实现垂直居中的效果了。设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。