如何实现水平or 垂直居中？

目录

知道宽高情况下：

1. 绝对定位,上左为50%，再让上左外边距为: -（实际宽高/2)

2. 绝对定位,上下左右为0, margin为auto(记得后面这一句话很重要!)

3. 单元格 - 父display为 table-cell;vertical-align为middle, text-align: center。

4. 单元格 父display 为table，子display为table-cell，vertical-align为middle, text-align: center

知道 or 不知道宽高的情况下都行

5. 绝对定位平移法

6.弹性盒子flex - 父display 为flex，子margin为auto

7. 伪元素- 父加微元素，并设置行高等于容器高，子设置display 为inline-block，content: "";

---

知道宽高情况下：

1. 绝对定位,上左为50%，再让上左外边距为: -（实际宽高/2)

        position:absolute

        top:50%

        left:50%

        margin-top:-50px // 高100px

        margin-left:-60px // 宽120px

2. 绝对定位,上下左右为0, margin为auto(记得后面这一句话很重要!)

        position:absolute

        top:0

        left:0

        right:0

        bottom:0

        margin:auto

3. 单元格 - 父display为 table-cell;vertical-align为middle, text-align: center。

       父

        display: table-cell;

        text-align: center; /*水平*/

        vertical-align: middle; /*垂直*/

        子

        display: inline-block;

4. 单元格 父display 为table，子display为table-cell，vertical-align为middle, text-align: center

        父 display:table

        子 display:table-cell

            vertical-align:middle  /*垂直*/

            text-align: center;/*水平*/

知道 or 不知道宽高的情况下都行

5. 绝对定位平移法

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%)

6.弹性盒子flex - 父display 为flex，子margin为auto

        display: flex; justify-content: center; align-items: center;

        或者

        父 display: flex; 

        子 margin: auto;

7. 伪元素- 父加微元素，并设置行高等于容器高，子设置display 为inline-block，content: "";

给父容器添加伪元素，并设置line-height等于容器的高度

子容器设置display: inline-block，content 为 "";

<div class="box">

   <div class="child">水平垂直居中</div>

</div>

<style>

.box {

          width: 200px;

          height: 200px;

          border: 1px solid;

          text-align: center;

}

.box::after { //父元素加伪元素

          content: "";

          line-height: 200px;

}

.child { 

          display: inline-block;

          background: red;

}

</style>

****************************************************************

1.绝对定位,上左为50%，再让上左外边距为: -（实际宽高/2);

position:absolute, top:50% ,left:50% ,margin-top:-(实际高/2),margin-left:-(实际宽/2)

2.绝对定位,上下左右为0, margin为auto(记得后面这一句话很重要!);

position:absolute, top/left/right/bottom:0 ,margin:auto

在知道or不知道宽高的情况下都行：

3.绝对定位平移法; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

4.弹性盒子的属性; 父display: flex; justify-content: center; align-items: center;

or 父 display: flex; 子 marring：auto

5.单元格; 父display:table,子display:table-cell 和 vertical-align:middle,text-align: center;