CSS 实现居中对齐的一些方法

水平居中

1. inline元素：text-align: center;
2. block元素：margin: auto;
3. absolute元素：left: 50% + margin-left 负值；

垂直居中

1. inline元素：line-height的值等于height的值；
2. flex布局；

   // 父元素
   .father {
       display: flex;
       align-items:Center;
   }
   
   // 或者
   .father {
      display: flex;
      flex-direction：column;
      justify-content：center；
   }

    

3. absolute和负margin(子元素需要确定宽高)；

   // 父元素
   .father {
       position: relative;
   }
   
   // 子元素
   .child {
       position: absolute;
       width: 100px;
       height: 50px;
       top: 50%;
       left: 50%;
       margin-left: -50px;
       margin-top: -25px;
       text-align: center;
   }

    

4. translate；

   // 父元素
   .father {
       position: relative;
   }
   
   // 子元素
   .box {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       text-align: center;
   }

    

5. absolute和margin:auto;

   // 父元素
   .father {
       position: relative;
   }
   
   // 子元素
   .child {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: auto;
   }