[译]CSS居中——Centering in CSS: A Complete Guide

原文Centering in CSS: A Complete Guide

CSS居中

水平居中

是inline或者inline元素（例如文本或者链接）？

在block-level的父级元素中，使用如下CSS来水平居中inline元素：

.center-children { text-align: center; }

HTML

<header>
  This text is centered.
</header>

<nav role='navigation'>
  <a href="#0">One</a>
  <a href="#0">Two</a>
  <a href="#0">Three</a>
  <a href="#0">Four</a>
</nav> 

CSS

body { background: #f06d06; }

header, nav { text-align: center; background: white; margin: 20px 0; padding: 10px; }

nav a { text-decoration: none; background: #333; border-radius: 5px; color: white; padding: 3px 8px; }

结果

对 inline, inline-block, inline-table, inline-flex等有效。

是区块元素？

对于区块元素，设置margin-left和margin-right为auto（还要设置一个width，否则的话，它将full width，不需要居中）。通常是这样做：

.center-me { margin: 0 auto; }

HTML

<main>
  <div class="center">
    I'm a block level element and am centered.
  </div>
</main>

CSS

body { background: #f06d06; }

main { background: white; margin: 20px 0; padding: 10px; }

.center { margin: 0 auto; width: 200px; background: black; padding: 20px; color: white; }

结果

在多个区块元素？

如果你有两个或者更多个区块元素，要在一行中水平居中，最好使用不同的display类型。下面是一个例子，使用inline-block（行内块元素）和flexbox。
HTML

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

CSS

body { background: #f06d06; font-size: 80%; }

main { background: white; margin: 20px 0; padding: 10px; }

main div { background: black; color: white; padding: 15px; max-width: 125px; margin: 5px; }

.inline-block-center { text-align: center; }
.inline-block-center div { display: inline-block; text-align: left; }

.flex-center { display: flex; justify-content: center; }

结果

除非你是多个区块元素相互堆叠，在这种情况下，auto边距会依然有效：
HTML：

<main>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

CSS

body { background: #f06d06; font-size: 80%; }

main { background: white; margin: 20px 0; padding: 10px; }

main div { background: black; margin: 0 auto; color: white; padding: 15px; margin: 5px auto; }

main div:nth-child(1) { width: 200px; }
main div:nth-child(2) { width: 400px; }
main div:nth-child(3) { width: 125px; }

结果

垂直居中

是inline或者inline元素（例如文本或者链接）？

是单独一行？

有时inline/text元素，由于其顶部和底部的padding相等，可以垂直居中。

.link { padding-top: 30px; padding-bottom: 30px; }

HTML

<main>
  <a href="#0">We're</a>
  <a href="#0">Centered</a>
  <a href="#0">Bits of</a>
  <a href="#0">Text</a>
</main>

CSS

body { background: #f06d06; font-size: 80%; }

main { background: white; margin: 20px 0; padding: 50px; }

main a { background: black; color: white; padding: 40px 30px; text-decoration: none; }

结果

如果由于某些原因，不可使用padding。这时可以使line-height等于height。

.center-text-trick { height: 100px; line-height: 100px; white-space: nowrap; }

HTML

<main>
  <div>
    I'm a centered line.
  </div>
</main>

CSS

body { background: #f06d06; font-size: 80%; }

main { background: white; margin: 20px 0; padding: 40px; }

main div { background: black; color: white; height: 100px; line-height: 100px; padding: 20px; width: 50%; white-space: nowrap; }

结果

有多行？

顶部和底部的padding相等，也适用于多行文本。但是如果这样做行不通。
vertical-align可以处理这种情况。(更多)
HTML

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

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

CSS

body { background: #f06d06; font-size: 80%; }

table { background: white; width: 240px; border-collapse: separate; margin: 20px; height: 250px; }

table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */ }

.center-table { display: table; height: 250px; background: white; width: 240px; margin: 20px; }
.center-table p { display: table-cell; margin: 0; background: black; color: white; padding: 20px; border: 10px solid white; vertical-align: middle; }

结果

未完待续