垂直居中、水平居中

垂直居中布局

垂直居中我感觉可以分为两个部分：

1.内容垂直居中

        文本内容的垂直居中通过line-height实现，具体取值为height-paddingTop+paddingBottom;

2.盒子垂直居中

1. position+transform实现。（引出问题：为什么不用marginTop？？涉及到重排和重绘）

   /*
           <div class="father">
           <div class="child">
               我要垂直居中
           </div>
           <div class="child">
               我要垂直居中
           </div>
           </div>
   */
   .father1 {
       width: 500px;
       height: 400px;
   
       line-height: 400px;
       /* 内容水平居中 */
       text-align: center;
   
       /* 盒子垂直居中 */
       position: absolute;
       top: 50%;
       transform:translate(-50%,-50%) ;
       /* 盒子水平居中 */
       left:50%;
       background-color: pink;
   }

2. flex实现。

   .father {
       display: flex;
       height: 300px;
       justify-content: space-between;
       align-items: center;
       flex-flow: row wrap;
       background-color: skyblue;
   }
   .child:nth-child(1) {
       background-color: pink;
   }
   .child:nth-child(2) {
       background-color: rgb(160, 12, 37);
   }