css样式实现居中对齐

一、行内元素的居中

1.水平居中

1.text-align

    .parent {
      background-color: red;
      text-align: center;
    }

  <div class="parent">
    <span class="child">content</span>
  </div>

2.fit-content

    .parent {
      background-color: red;
      width: fit-content;
      margin: auto;
    }

  <div class="parent">
    <span class="child">content</span>
  </div>

2.垂直居中

1.line-height(单行文本)

    .parent {
      height: 200px;
      line-height: 200px;
      background-color: red;
    }

  <div class="parent">
    <span class="child">content</span>
  </div>

二、块级元素的居中

水平居中:margin:0 auto;

    .parent {
      background-color: red;
    }
    .child {
      margin: 0 auto;
      width: 100px;
      background-color: royalblue;
    }

  <div class="parent">
    <div class="child">content</div>
  </div>

三、水平垂直居中

1.提前知道子元素的宽高

    .parent {
      position: relative;
      height: 200px;
      background-color: red;
    }
    .child {
      height: 100px;
      width: 100px;
      position: absolute;
      background-color: royalblue;
      left: 50%;
      top: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }

  <div class="parent">
    <div class="child">content</div>
  </div>

也可以使用css中的calc函数

    .parent {
      position: relative;
      height: 200px;
      background-color: red;
    }
    .child {
      height: 100px;
      width: 100px;
      position: absolute;
      background-color: royalblue;
      left: calc(50% - 50px);
      top: calc(50% - 50px);
    }

2.不知道子元素的宽高

    .parent {
      position: relative;
      height: 200px;
      background-color: red;
    }
    .child {
      position: absolute;
      background-color: royalblue;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

3.定位+margin

    .parent {
      position: relative;
      height: 200px;
      background-color: red;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: royalblue;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

4.padding

    .parent {
      padding: 20px;
      background-color: red;
    }
    .child {
      height: 200px;
      background-color: royalblue;
    }

5.通过flex实现

    .parent {
      height: 200px;
      display: flex;
      align-items: center; /*控制垂直居中*/
      justify-content: center; /*控制水平居中*/
      background-color: red;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: royalblue;
    }

6.伪元素

 .parent {
      height: 200px;
      text-align: center;
      vertical-align: middle;
      background-color: red;
    }
    .child {
      width: 100px;
      height: 100px;
      display: inline-block;
      vertical-align: middle;
      background-color: royalblue;
    }
    .parent::before {   /*默认行内元素，添加display: inline-block;成为行内块元素*/
      content: "";
      width: 20px;
      height: 200px;
      display: inline-block;
      vertical-align: middle;
    }

7.calc函数

    .parent {
      height: 600px;
      width: 600px;
      background-color: red;
    }
    .child {
      width: 100px;
      height: 100px;
      padding: calc((100% - 100px) / 2);/*使子元素的margin都是250px*/
      background-clip: content-box;/*只对子元素生效，防止f覆盖父元素*/
      background-color: royalblue;
    }