css9种水平垂直居中的玩法

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

1.flex的玩法

主要通过flex使内部盒子水平排在中间，垂直排在中间

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

<div class="main">
    <div class="child">1245</div>
  </div>

效果：

2.绝对定位+子元素长宽

在知道子元素长宽的情况下，父元素使用相对定位，子元素使用绝对定位，最后使用margin子元素长宽的一半

css

  .main {
      width: "1000px";
      height: 600px;
      background-color: blue;
      position: relative;
    }

    .child {
      width: 400px;
      height: 400px;
      background: red;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -200px;
      margin-top: -200px
    }

    span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

html

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

3.margin:auto

主要是子元素必须要有具有长宽的前提，父元素相对定位，子元素绝对定位，并且left,right,top,bottom,最后使用margin:auto html

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

css

    .main {
      width: 1000px;
      height: 600px;
      background-color: blue;
      position: relative;
    }

    .child {
      width: 400px;
      height: 400px;
      background: red;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

4.绝对定位+无限制

父元素使用相对定位，子元素使用绝对定位50%，但是需要使用transform:translate(-50%,-50%)来将定位中子元素的长宽反向回退一半

    .main {
      width: 600px;
      height: 600px;
      background-color: red;
      position: relative;
    }

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

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

5.grid

使用grid语法，我们可以通过设置横向，纵向居中的属性使子元素居中 html

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

css

    .main {
      height: 600px;
      display: grid;
    }

    .child {
      justify-self: center;
      align-self: center;
    }

6.flex+margin:auto

父级元素使用flex,子元素使用margin:auto html

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

css

    .main {
      height: 600px;
      display: flex;
    }

    .child {
      margin: auto;
    }

7. 伪类

父元素使用伪类将子元素inline-block化，水平居中，垂直使用vertical-align:middle方向

html

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

css

    .main {
      font-size: 0;
      text-align: center;
      height: 600px;
    }

    .main::before {
      content: "";
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }

    .child {
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
    }

8.使用表格

使用表格的属性将父元素变成表格的形式，子元素使用table-cell设置元素内容

    .main {
      width: 600px;
      height: 600px;
      display: table;
      background-color: red;
    }

    .child {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }