目录

垂直居中

关于元素垂直居中与水平居中的一些总结。

垂直居中 父元素高度确定的多行文本

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
方法一:使用插入 table (包括 tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:

table td{height:500px;background:#ccc}
<body>
  <table>
    <tbody>
      <tr>
        <td class="wrap">
          <div>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

垂直居中父元素高度确定的多行文本

<style>
  .container {
    height: 300px;
    background: #ccc;
    display: table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align: middle; /*IE8以上及Chrome、Firefox*/
  }
</style>
<div class="container">
  <div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
  </div>
</div>

垂直居中 父元素高度不限

下面的方法有两个(小)前提。如果你能做到这些前提,那么这个方法适用于你:
你需要把想要竖向居中的内容放到一个 block 元素中,并给这个想要居中的元素指定固定的高度。
绝对定位(absolutely-position)这个元素。(通常这样做是没问题的,因为你这个想要居中的元素的父元素仍然可以使用相对位置)。
如果你能接受上面的两个必要条件,那么,方法是这样的:
指定父元素为 position:relative 或 position:absolute。
给子元素指定固定的高度。给子元素设定 position:absolute 以及 top:50%,让子元素移动到父元素内部上下居中的位置。
给子元素设定 margin-top:-yy,这里的 yy 的值是你的子元素的高度的一半,弥补居中时的偏差。

水平居中