CSS水平，垂直居中的11个场景

CSS居中是我们开发中经常遇到的情况，有的时候感觉很简单，有的时候感觉很复杂，让人摸不着头脑。

在本教程中，我们将以实例的方式，讲解各个场景下的CSS水平，垂直居中的实现。以后您只需对号入座，即可解决所有的居中问题。

水平居中
垂直居中
水平和垂直居中
总结

水平居中

场景1：水平居中 `inline` 或 `inline-*` 元素，如文本，链接

只需使用块级元素将内联元素包含起来，并设置 text-align: center ，即可实现居中。

<style>
  .parent-1 {
    text-align: center; /* 使内联元素居中 */
  }
</style>

<div class="parent-1">
  我是一个水平居中的文本。
</div>

<div class="parent-1">
  <a href="#">链接1</a>
  <a href="#">链接2</a>
  <a href="#">链接3</a>
  <a href="#">链接4</a>
</div>

尝试一下 »

该方法适用于inline，inline-block，inline-table，inline-flex等内联元素的情况。

场景2：水平居中 `block` 元素

你可以设置 margin-left 和 margin-right 为 auto 来使块级元素居中。（同时该元素需要有设置了 width 属性才会生效，否则块级元素会占满一整行，自然不能居中。）一般使用如下的样式实现居中：

<style>
  .center-me {
    margin: 0 auto; /* 使块级元素居中 */
    width: 200px;
    background: black;
    padding: 20px;
    color: white;
  }
</style>

<div class="center-me">
  我是一个水平居中的块状元素。
</div>

尝试一下 »

注意：如果使用了float，则不会居中。

场景3：水平居中多个 `block` 元素

更改 `display` 属性为 `inline-block`

父元素设置为 text-align: center ，子元素设置 display 属性为 inline-block ，同水平居中 inline 元素是一样的道理。

<style>
  .parent-2 {
    background: green;
    text-align: center; /* 使下级元素居中 */
  }

  .parent-2 div {
    display: inline-block; /* 使块级元素在同一行 */
    text-align: left;
    background: black;
    color: white;
    padding: 15px;
    max-width: 125px;
    margin: 5px;
  }
</style>

<div class="parent-2">
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。我有着更多的内容。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。
  </div>
</div>

尝试一下 »

将父元素改为 `flex`

将父元素改为 flex，并设置 justify-content: center; 即可实现居中

<style>
  .parent-3 {
    background: green;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .parent-3 div {
    background: black;
    color: white;
    padding: 15px;
    max-width: 125px;
    margin: 5px;
  }
</style>

<div class="parent-3">
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。我有着更多的内容。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一行水平居中。
  </div>
</div>

尝试一下 »

以上实例使用了 flex，浏览器兼容性如下：

IE / Edge	Chrome	Firefox	Safari	Opera
11 10 -ms-	20 4 -webkit-	27 2 -moz-	6 3.1 -webkit-	12.1

如果你想从上到下依次居中几个块级元素，那么仍然可以使用 margin: 0 auto; 来实现。

<style>
  .parent-4 {
    background: green;
    padding: 10px;
  }

  .parent-4 div {
    background: black;
    margin: 0 auto; /* 使自身水平居中 */
    color: white;
    padding: 15px;
    margin: 5px auto;
  }

  .parent-4 div:nth-child(1) {
    width: 200px; /* 需要设置宽度才能水平居中 */
  }

  .parent-4 div:nth-child(2) {
    width: 400px;
  }

  .parent-4 div:nth-child(3) {
    width: 125px;
  }
</style>

<div class="parent-4">
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一列水平居中。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一列水平居中。我有着更多的内容。
  </div>
  <div>
    我是一个inline-block元素，我和我的同胞节点在同一列水平居中。
  </div>
</div>

尝试一下 »

垂直居中

垂直居中则要相对复杂一点。

场景4：垂直居中只有一行内容的 `inline` 或 `inline-*` 元素，如文本，链接

设置 padding-top 和 padding-bottom 相等，即可使内联或文本元素居中。

<style>
  .parent-5 {
    background: green;
    padding: 50px;
  }

  .parent-5 a {
    background: black;
    color: white;
    padding: 40px 30px;
    text-decoration: none;
  }
</style>

<div class="parent-5">
  <a href="#">我们</a>
  <a href="#">都</a>
  <a href="#">垂直居中。</a>
</div>

尝试一下 »

如果因为一些原因不能使用padding，而且已知文本是不会换行的，那还可以使用 height 和 line-height 来垂直居中文本。

<style>
  .parent-6,
  .parent-6 > div {
    box-sizing: border-box;
  }

  .parent-6 {
    background: green;
    padding: 40px;
  }

  .parent-6 div {
    background: black;
    color: white;
    height: 100px;
    line-height: 100px; /* 设置和height一样高的line-height */
    padding: 0 20px;
    white-space: nowrap;
  }
</style>

<div class="parent-6">
  <div>
    这行文字是垂直居中的。
  </div>
</div>

尝试一下 »

场景5：垂直居中有多行内容的 `inline` 或 `inline-*` 元素，如文本，链接

使用上下 padding 相等也解决这个问题。如果不生效的话，那么可以设置父元素的 display 为 table ，子元素的 display 为 table-cell 中，然后设置 vertical-align 为 middle 实现垂直居中。

<style>
  table.parent-7 {
    background: green;
    width: 240px;
    border-collapse: separate;
    margin: 20px;
    height: 250px;
    padding: 20px;
  }

  /* 默认的 vertical-align 是 middle，不用再设置 */
  table.parent-7 td {
    background: black;
    color: white;
    border: 0;
    padding: 20px;
  }

  .center-table {
    box-sizing: border-box;
    display: table;
    height: 250px;
    background: green;
    width: 240px;
    margin: 20px;
    padding: 20px;
  }

  .center-table p {
    display: table-cell;
    margin: 0;
    background: black;
    color: white;
    padding: 20px;
    vertical-align: middle;
  }
</style>

<table class="parent-7">
  <tbody>
    <tr>
      <td>
        我是多行文本，在一个表格单元中垂直居中。
      </td>
    </tr>
  </tbody>
</table>

<div class="center-table">
  <p>我是多行文本，在一个CSS创建的表格布局中垂直居中。</p>
</div>

尝试一下 »

注意：此为特殊用法，vertical-align 一般用来处理一行中的元素如何排列。

如果使用 table 也没有效果，那么可以试下 flex。在 flex 中，一个子元素可以轻易地在父元素中居中。

<style>
  .parent-8 {
    background: green;
    width: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 200px;
    resize: vertical;
    overflow: auto;
  }

  .parent-8 p {
    background: black;
    color: white;
    margin: 0;
    padding: 20px;
  }
</style>

<div class="parent-8">
  <p>多行文本在flexbox容器中垂直居中。</p>
</div>

尝试一下 »

注意这种方法只有在父级元素有一个固定的高度（如px，%）才会生效。

以上实例使用了 flex，浏览器兼容性如下：

IE / Edge	Chrome	Firefox	Safari	Opera
11 10 -ms-	20 4 -webkit-	27 2 -moz-	6 3.1 -webkit-	12.1

如果上面的方法都失效了，你还可以使用“伪元素”，在父元素中放一个100%高度的伪元素，使文本在其中垂直居中。

<style>
  .parent-9 {
    background: green;
    width: 240px;
    height: 200px;
    margin: 20px;
    color: white;
    resize: vertical;
    overflow: auto;
    padding: 20px;
  }

  .ghost-center {
    position: relative;
  }

  .ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
  }

  .ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 190px;
    margin: 0;
    padding: 20px;
    background: black;
  }
</style>

<div class="ghost-center parent-9">
  <p>我是多行文本，通过伪元素实现垂直居中。</p>
</div>

尝试一下 »

场景6：垂直居中知道高度的 `block` 元素

<style>
  .parent-10 {
    background: green;
    height: 300px;
    margin: 20px;
    width: 300px;
    position: relative;
    resize: vertical;
    overflow: auto;
  }

  .parent-10 div {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    height: 100px;
    margin-top: -50px; /* 高度的一半 */
    background: black;
    color: white;
    padding: 20px;
  }
</style>
<div class="parent-10">
  <div>
    我是一个块状的元素，我有固定高度，通过高度可计算出垂直居中的偏移量。
  </div>
</div>

尝试一下 »

场景7：垂直居中不知道高度的 `block` 元素

这时候，我们仍然可以将元素向上移动其高度的一半来垂直居中它。

<style>
  .parent-11 {
    background: green;
    height: 300px;
    margin: 20px;
    width: 300px;
    position: relative;
    resize: vertical;
    overflow: auto;
  }

  .parent-11 div {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    background: black;
    color: white;
    padding: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); /* 自身的高度向上偏移一半 */
    resize: vertical;
    overflow: auto;
  }
</style>

<div class="parent-11">
  <div>
    我是一个块状元素，高度位置，通过transform可以自动算出高度。
  </div>
</div>

尝试一下 »

以上实例使用了 transform，浏览器兼容性如下：

IE / Edge	Chrome	Firefox	Safari	Opera
9 9 -ms- 6 polyfill	4 4 -webkit-	3.5 3.5 -moz-	3.1 3.1 -webkit-	10.5 10.5 -o-

场景8：使用 `flex`

使用 flex 可以非常简单的实现垂直居中。

<style>
  .parent-12 {
    background: green;
    height: 300px;
    width: 200px;
    padding: 20px;
    margin: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    resize: vertical;
    overflow: auto;
  }

  .parent-12 div {
    background: black;
    color: white;
    padding: 20px;
    resize: vertical;
    overflow: auto;
  }
</style>
<div class="parent-12">
  <div>
    我是一个块状元素，高度未知，通过flexbox可以实现上下居中。
  </div>
</div>

尝试一下 »

以上实例使用了 flex，浏览器兼容性如下：

IE / Edge	Chrome	Firefox	Safari	Opera
11 10 -ms-	20 4 -webkit-	27 2 -moz-	6 3.1 -webkit-	12.1

水平和垂直居中

你可以通过上面的技巧，来实现元素居中。

场景9：水平和垂直居中固定宽高的元素

使用绝对定位将元素设置于父元素(50%，50%)的位置，接着再通过将 margin 设置负外边距，margin-left 设为 width 的一半，margin-top 设为 height 的一半。

<style>
  .parent-13,
  .parent-13 div {
    box-sizing: border-box;
  }

  .parent-13 {
    position: relative;
    background: green;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    resize: both;
    overflow: auto;
  }

  .parent-13 div {
    background: black;
    color: white;
    width: 200px;
    height: 120px;
    margin: -60px 0 0 -100px; /* 宽度和高度的一半 */
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
  }
</style>

<div class="parent-13">
  <div>
    我是一个块状元素，我有固定的宽高，通过宽高计算出偏移量可实现水平和垂直居中。
  </div>
</div>

尝试一下 »

场景10：水平和垂直居中不知道固定宽高的元素

如果你不知道元素的宽高，那你可以使用 transform 属性，对宽高两个方向设置-50%来实现居中：

<style>
  .parent-14 {
    position: relative;
    background: green;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    resize: both;
    overflow: auto;
  }

  .parent-14 div {
    background: black;
    color: white;
    width: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    resize: both;
    overflow: auto;
  }
</style>

<div class="parent-14">
  <div>
    我是一个块状元素，宽高未知，通过 transform 属性 ，对宽高两个方向设置-50%来实现居中。
  </div>
</div>

尝试一下 »

以上实例使用了 transform，浏览器兼容性如下：

IE / Edge	Chrome	Firefox	Safari	Opera
9 9 -ms- 6 polyfill	4 4 -webkit-	3.5 3.5 -moz-	3.1 3.1 -webkit-	10.5 10.5 -o-

场景11：使用 `flex`

只需对父元素使用 justify-content 和 align-items 两个属性即可实现居中。

<style>
  .parent-15 {
    background: green;
    height: 200px;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    resize: both;
    overflow: auto;
  }

  .parent-15 div {
    background: black;
    color: white;
    width: 50%;
    padding: 20px;
    resize: both;
    overflow: auto;
  }
</style>

<div class="parent-15">
  <div>
    我是一个块状元素，宽高未知，通过flexbox可实现水平和垂直居中。
  </div>
</div>

尝试一下 »

以上实例使用了 flex，浏览器兼容性如下：

IE / Edge	Chrome	Firefox	Safari	Opera
11 10 -ms-	20 4 -webkit-	27 2 -moz-	6 3.1 -webkit-	12.1

总结

通过上面的实例，我们可以看到不管是水平还是垂直居中，我们总能找到办法实现。

同时，在浏览器兼容的情况下，使用 flex 布局是最简单有效的办法。

CSS水平，垂直居中的11个场景

水平居中

场景1：水平居中 `inline` 或 `inline-*` 元素，如文本，链接

场景2：水平居中 `block` 元素

场景3：水平居中多个 `block` 元素

更改 `display` 属性为 `inline-block`

将父元素改为 `flex`

垂直居中

场景4：垂直居中只有一行内容的 `inline` 或 `inline-*` 元素，如文本，链接

场景5：垂直居中有多行内容的 `inline` 或 `inline-*` 元素，如文本，链接

场景6：垂直居中知道高度的 `block` 元素

场景7：垂直居中不知道高度的 `block` 元素

场景8：使用 `flex`

水平和垂直居中

场景9：水平和垂直居中固定宽高的元素

场景10：水平和垂直居中不知道固定宽高的元素

场景11：使用 `flex`

总结

CSS 布局

更多教程

Sponsors

CSS水平，垂直居中的11个场景

水平居中

场景1：水平居中 inline 或 inline-* 元素，如文本，链接

场景2：水平居中 block 元素

场景3：水平居中多个 block 元素

更改 display 属性为 inline-block

将父元素改为 flex

垂直居中

场景4：垂直居中只有一行内容的 inline 或 inline-* 元素，如文本，链接

场景5：垂直居中有多行内容的 inline 或 inline-* 元素，如文本，链接

场景6：垂直居中知道高度的 block 元素

场景7：垂直居中不知道高度的 block 元素

场景8：使用 flex

水平和垂直居中

场景9：水平和垂直居中固定宽高的元素

场景10：水平和垂直居中不知道固定宽高的元素

场景11：使用 flex

总结

CSS 布局

更多教程

Sponsors

场景1：水平居中 `inline` 或 `inline-*` 元素，如文本，链接

场景2：水平居中 `block` 元素

场景3：水平居中多个 `block` 元素

更改 `display` 属性为 `inline-block`

将父元素改为 `flex`

场景4：垂直居中只有一行内容的 `inline` 或 `inline-*` 元素，如文本，链接

场景5：垂直居中有多行内容的 `inline` 或 `inline-*` 元素，如文本，链接

场景6：垂直居中知道高度的 `block` 元素

场景7：垂直居中不知道高度的 `block` 元素

场景8：使用 `flex`

场景11：使用 `flex`