CSS 居中彻底指南

翻译自 https://css-tricks.com/centering-css-complete-guide/

预先给出这样的样式

<style>
  .container {
    width: 100%;
    height: 200px;
    background-color: azure;
  }
  
  .child {
    width: 150px;
    height: 150px;
    background-color: bisque;
    margin: 0 10px;
  }
</style>

水平居中

子元素为 inline 或者 inline-* 元素（例如 text 或者 links)

使用 text-align: center; 的方法

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
  .container {
    text-align: center;
  }
  
  .child {
    display: inline-block;
  }
</style>

子元素为 block 元素

使用 margin: 0 auto; 的方法

<div class="container">
  <div class="child"></div>
</div>

<style>
  .container {}
  
  .child {
    margin: 0 auto;
  }
</style>

有多个 block 元素

若是你有两个或更多的 block-level 元素须要在一行内居中

方法一：
改变 display 的类型为 inline-block

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
  .container {
    text-align: center;
  }
  
  .child {
    display: inline-block;
  }
</style>

方法二：
使用 flexbox

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
  }
  
  .child {}
</style>

垂直居中

子元素为 inline 或者 inline-* 元素（例如 text 或者 links)

只有一行文本

一个小技巧是将 height 与 line-height 设置为相同的值

<div class="container">
  <a class="child">center</a>
</div>

<style>
  .container {}
  
  .child {
    height: 150px;
    line-height: 150px;
  }
</style>

有多行文本

能够尝试将父元素的 display 设置为 table ，同时设置该元素的 display 为 table-cell，而后设置vertical-align: middle

<div class="container">
  <a class="child">I'm vertically centered multiple lines of text in a CSS-created table layout.</a>
</div>

<style>
  .container {
    display: table;
    width: 150px;
  }
  
  .child {
    display: table-cell;
    vertical-align: middle;
  }
</style>

或者实际的将其放入 table 中

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

<style>
  table {
    width: 150px;
    height: 200px;
    background-color: azure;
  }
  
  table td {
    background-color: bisque;
  }
</style>

或者使用 flexbox

<div class="container">
  <a class="child">I'm vertically centered multiple lines of text in a flexbox container.</a>
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  
  .child {
    height: auto;
  }
</style>

若是上面的方法都不起做用的话，能够使用一个幽灵元素。在文本前面插入一个高度为百分百的伪元素，让文本与其垂直对齐。

<div class="container">
  <p class="child">I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

<style>
  .container::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  
  .child {
    height: auto;
    display: inline-block;
    vertical-align: middle;
  }
</style>

块级元素

<div class="container">
  <div class="child"></div>
</div>

<style>
  .container {
    position: relative;
  }
  
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

或者使用 flexbox

<div class="container">
  <div class="child"></div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .child {}
</style>

垂直 & 水平居中

<div class="container">
  <div class="child"></div>
</div>

<style>
  .container {
    position: relative;
  }
  
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

或者使用 flexbox

<div class="container">
  <div class="child"></div>
</div>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .child {}
</style>