css居中方式总结（亲测有效）

• 水平居中（行内元素水平居中、块级元素水平居中）
• 垂直居中
• 水平垂直居中

行内元素水平居中

text-align: center

<div class="container">hello world</div>

.container {
    text-align: center    
}

适用情况：

• 行内元素，包括：文字、按钮、图片等
• display: inline、inline-block、inline-table、inline-flex的块级元素（注：此时，width/height不生效哦~）

块级元素水平居中

margin: 0 auto;

<div class="container">
    <div class="son">hello world</div>
</div>

.son {
    width: 100px;
    margin: 0 auto;
}

适用情况：

• 子元素必须设置宽度，即定宽。（否则，宽度默认为100%，就不存在居中一说）

display: table

<div class="container">
    <div class="son">hello world</div>
</div>

.son {
    display: table;
    margin: 0 auto;
}

原因：
利用table的长度自适应，即使不定义长度，会根据其内容的长度来定义宽度，而不是默认为100%的宽度。在某种意义上来说，也是一种定宽。

块级元素垂直居中

• 单行文字居中

  <div class="container">
    <div class="son">hello world</div>
  </div>
  
  .container {
      height: 100px;
      line-height: 100px;
  }
  

• 多行文字居中

  <div class="container">
    <div>hello world</div>
      <div>hello world</div>
      <div>hello world</div>
  </div>
  
  .container {
      height: 500px;
      display: table-cell;
      vertical-align: middle;
  }
  

块级元素水平垂直居中

flex布局（推荐使用）

<div class="container">
    <div>hello world</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

适用范围：

• 不定宽高

绝对定位 + transform属性

<div class="container">
    <div class="son">hello world</div>
</div>

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

• 在translate中使用-50%，是相对于子元素本身的宽度，不要与下面的margin混淆。
• 不定宽高

绝对定位 + margin

<div class="container">
    <div class="son">hello world</div>
</div>

.container {
    height: 500px;
    width: 500px;
    display: relative;
}
.son {
    display: absolute;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

注意：

在margin 中不能使用-50%，因为在这里相对的父元素百分比，如果使用了 margin: -50% 0 0 -50%; 则子元素还是会回到左上角。

适用范围：

• 子元素定宽

绝对定位

<div class="container">
    <div class="son">hello world</div>
</div>

.container{
    width: 500px;
    height: 500px;
    background: red;
    position: relative;
}   
.son{
    height: 100px;
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: yellow;
}

适用条件

• 父子元素都必须定宽