关于css的各种居中

1. 在css中用text-align和display属性实现居中
   
   
   在父级设置text-align: center;之后在子级div中加入display: inline-block;就可以完成水平居中。需要注意的是text-align属性具有继承性，也就是说当父级设置了这个属性时，其所有子级都将会是你设置的效果。在我这个代码中，我在body设置text-align，box1和box2进行继承。
2. 在css中用display和margin属性实现水平居中position和margin属性实现垂直居中
   
   
   这种方法只需要在子级进行设置就能实现效果，需要注意的是设不设置display属性，同样也会有居中效果，但是设置display属性时不能设置为inline属性值，否则居中就会失效。在我这个代码中box1用display属性box2就没有用到display属性。
   
   
   这就是用position和margin属性实现垂直居中，进行垂直居中需要用到top因为是居中效果所以值调到50%，但top的50%是按照上边边框边缘进行移动，所以得到的结果会在中间位置向下偏移，所以不要忘记用图中的transform：translateY（-50%)将它调整过来。
3. 在css中用position属性实现水平居中和垂直居中
   
   
   这个主要是将box2里的left和bottom进行调整，因为要的是居中效果所以left调到50%，还有就是position: absolute;（绝对定位）他的定位参照物是自己的父级，所以父级必须有position属性static除外的其他三个如果没有的话就会向上一直找，直到body为止。
   
   
   和水平差不多除了调上下左右外就是将translateX改成translateY。
4. 在css中用display和align-items属性实现垂直居中
   
   
   这里布局使用的flex布局（弹性布局）而且这种方法只需要在父级设置就可以了。