垂直水平居中

*****6种*****

目录

1.子绝父相，子上下左右0，margin：auto

2.子绝父相上左50%偏移量margin-上左宽高的一半

3.父盒子弹性布局主轴交叉轴居中

4.把子盒子转行内块为其设置垂直对其方式，父盒子文本居中行高相同设置垂直对其方式中线对其，

5.子绝父相，子上左50%偏移，转换：平移水平垂直平移-50%

6.弹性布局，子盒子设置外边距auto

7.table-cell布局，把子盒子转为行内块，父盒子设置以表格单元格形式存在，文本设置居中（水平），垂直对其方式中线对其

---

 <div class="box1">
        <div class="box2"></div>
       
    </div>

1.子绝父相，子上下左右0，margin：auto

 .box1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;

        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

2.子绝父相上左50%偏移量margin-上左宽高的一半

  .box1 {
         width: 400px;
         height: 400px;
         background-color: red;
         position: relative;

         }

         .box2 {
         width: 200px;
         height: 200px;
         background-color: blue;
         position: absolute;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
         }

3.父盒子弹性布局主轴交叉轴居中

 .box1 {
            width: 400px;
            height: 400px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
           
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;

        } 

4.把子盒子转行内块为其设置垂直对其方式，父盒子文本居中行高相同设置垂直对其方式中线对其，

 .box1 {
        width: 400px;
        height: 400px;
        background-color: red;
      text-align: center;
      line-height: 400px;

        }

        .box2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        display: inline-block;
        vertical-align: middle;
      }

5.子绝父相，子上左50%偏移，转换：平移水平垂直平移-50%

 .box1 {
       width: 400px;
       height: 400px;
       background-color: red;
      position: relative;

       }

       .box2 {
       width: 200px;
       height: 200px;
       background-color: blue;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%,-50%);
       }

6.弹性布局，子盒子设置外边距auto

 .box1 {
         width: 400px;
         height: 400px;
         background-color: red;
         display: flex;
     

         }

         .box2 {
         width: 200px;
         height: 200px;
         background-color: blue;
         margin: auto;

         }

7.table-cell布局，把子盒子转为行内块，父盒子设置以表格单元格形式存在，文本设置居中（水平），垂直对其方式中线对其

 .box1 {
      width: 400px;
      height: 400px;
       background-color: red;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: blue;
      display: inline-block;
    }