4 居中布局

元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

1. 利用绝对定位+transform ，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高

    .father {
      position: relative;
    }
    .son {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

2. 利用绝对定位+margin:auto ，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高

    .father {
      position: relative;
    }
    .son {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0px;
      margin: auto;
      height: 100px;
      width: 100px;
    }

3. 利用绝对定位+margin:负值 ，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高

    .father {
      position: relative;
    }
    .son {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 200px;
      margin-left: -100px;
      margin-top: -100px;
    }

4. 利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓

    <style>
        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>

5. grid网格布局

    <style>
    .father {
      display: grid;
      align-items:center;
      justify-content: center;
      width: 200px;
      height: 200px;
      background: skyblue;
    
    }
    .son {
      width: 10px;
      height: 10px;
      border: 1px solid red
    }
    </style>
    <div class="father">
      <div class="son"></div>
    </div>

6. table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text- align可以让所有的行内块级元素水平垂直居中

    <style>
        .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle;
            text-align: center;
        }
        .son {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>

小结

不知道元素宽高大小仍能实现水平垂直居中的方法有：

• 利用定位+transform
• flex布局
• grid布局

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

内联元素居中布局

• 水平居中
  • 行内元素可设置：text-align: center
  • flex布局设置父元素：display: flex; justify-content: center
• 垂直居中
  • 单行文本父元素确认高度：height === line-height
  • 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

• 水平居中
  • 定宽: margin: 0 auto
  • 绝对定位+left:50%+margin:负自身一半
• 垂直居中
  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高，不定宽)
  • grid(不定高，不定宽)，兼容性相对比较差

左右居中

• 行内元素: text-align: center
• 定宽块状元素: 左右 margin 值为 auto
• 不定宽块状元素: table布局，position + transform

    /* 方案1 */
    .wrap {
      text-align: center
    }
    .center {
      display: inline;
      /* or */
      /* display: inline-block; */
    }
    /* 方案2 */
    .center {
      width: 100px;
      margin: 0 auto;
    }
    /* 方案2 */
    .wrap {
      position: relative;
    }
    .center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

上下居中

• 定高：margin，position + margin(负值)
• 不定高：position + transform，flex，IFC + vertical-align:middle

    /* 定高方案1 */
    .center {
      height: 100px;
      margin: 50px 0;   
    }
    /* 定高方案2 */
    .center {
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -25px;
    }
    /* 不定高方案1 */
    .center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    /* 不定高方案2 */
    .wrap {
      display: flex;
      align-items: center;
    }
    .center {
      width: 100%;
    }
    /* 不定高方案3 */
    /* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
    .wrap::before {
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
    .wrap {
      text-align: center;
    }
    .center {
      display: inline-block;  
      vertical-align: middle;
    }