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>