水平居中&垂直居中&水平垂直居中

水平居中

1. 行内元素，在父元素中设置（不是行内元素可以设置 display: inline-block 将子元素设置为行内元素）

text-align: center

2. 子元素设置 width+margin

      .parent {
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
        margin: 0 auto;
      }

3. 绝对定位

.parent {
        position: relative;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
        position: absolute;
        margin: 0 auto;
        left:0;
        right: 0;
      }

注意：一定要设置 margin

如果不设置 width，子元素会被拉升和父元素宽度一样

4. 绝对定位 + translateX(不需要知道子元素的宽度)

.parent {
        position: relative;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
      }

5. 绝对定位+负 margin（需要知道子元素的宽度）

 .parent {
        position: relative;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
      }

6. 父元素 display: flex

.parent {
        display: flex;
        justify-content: center;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
      }

7. 父元素 display: flex + 子元素 margin: 0 auto

.parent {
        display: flex;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
        margin: 0 auto;
      }

8. 父元素 display: grid

.parent {
        display: grid;
        /* justify-content: center; */
        justify-items: center;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
      }

9. 父元素 display: grid + 子元素 margin: 0 auto

.parent {
        display: grid;
        background-color: aquamarine
      }
      .child {
        background-color: chocolate;
        opacity: 0.5;
        width: 200px;
        margin: 0 auto;
      }

垂直居中

1. 行内元素 line-height 设置为父元素的高度

.child {
        height: 200px;
        line-height: 200px;
      }

2. flex 布局

/*方法一*/
 .parent {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

/*方法二*/
      .parent {
        height: 200px;
        display: flex;
        align-items: center;
      }

3. 绝对定位+负 margin

注意： 需要给父元素设置高度

 .parent {
        position: relative;
        background-color: aquamarine;
        height: 500px;
      }
      .child {
        background-color: chocolate;
        position: absolute;
        height: 200px;
        top: 50%;
        margin-top: -100px;
      }

4. 绝对定位 + translateY

.parent {
        position: relative;
        background-color: aquamarine;
        height: 500px;
      }
      .child {
        background-color: chocolate;
        position: absolute;
        height: 200px;
        top: 50%;
        transform: translateY(-50%);
      }

5. grid 布局

.parent {
        background-color: aquamarine;
        display: grid;
        align-items: center;
        height: 200px;
      }

水平垂直居中

1. 绝对定位 + 负 margin

.parent {
        background-color: aquamarine;
        position: relative;
        height: 600px;
      }

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

2. 绝对定位 + translate

.parent {
        background-color: aquamarine;
        position: relative;
        height: 600px;
      }

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

3. 绝对定位 + margin: auto

.parent {
        background-color: aquamarine;
        position: relative;
        height: 600px;
      }

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

4. flex 布局

 .parent {
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 600px;
      }

      .child {
        background-color: chocolate;
        width: 200px;
        height: 200px;
      }

5. flex 布局+ margin

.parent {
        background-color: aquamarine;
        display: flex;
        height: 600px;
      }

      .child {
        background-color: chocolate;
        width: 200px;
        height: 200px;
        margin: auto;
      }

6. grid 布局 + margin

.parent {
        background-color: aquamarine;
        display: grid;
        height: 600px;
      }

      .child {
        background-color: chocolate;
        width: 200px;
        height: 200px;
        margin: auto;
      }

7. grid 布局

.parent {
        background-color: aquamarine;
        display: grid;
        justify-content: center;
        align-items: center;
        height: 600px;
      }

      .child {
        background-color: chocolate;
        width: 200px;
        height: 200px;
      }