CSS实现元素垂直居中

2024年4月6日 110次阅读 来源: 景初

CSS实现元素垂直居中

对元素的垂直居中针对于单行元素和多行元素将分情况讨论。

一、父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
HTML结构：

<div class="container">
  Hello World!!!
</div>

CSS样式：

<style>
  .container{
    height:100px;
    line-height:100px;
    background:#999;
  }
</style>

二、父元素高度不确定的多行文本

对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距（padding值）即可实现居中，这个数值不必过大。

三、父元素高度确定的多行文本

多行文本，图片，块级元素皆属于这种情况，对此的垂直居中主要有两种方法。

1.插入 table

对要垂直居中的元素外插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
另需注意，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。
HTML结构：

<body>
  <table>
    <tbody>
      <tr>
        <td class="wrap">
          <div>
            <p>Hello World!!!</p>
            <p>Hello World!!!</p>
            <p>Hello World!!!</p>
            <p>Hello World!!!</p>
            <p>Hello World!!!</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

CSS样式：

table td{height:500px;background:#ccc}

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

2.设置块级元素的 display 为 table-cell

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
HTML结构：

<div class="container">
  <div>
    <p>Hello World!!!</p>
    <p>Hello World!!!</p>
    <p>Hello World!!!</p>
    <p>Hello World!!!</p>
    <p>Hello World!!!</p>
  </div>
</div>

CSS样式：

<style>
  .container{
    height:300px;
    background:#ccc;
    display:table-cell;
    vertical-align:middle;
  }
</style>

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。

    原文作者：景初
    原文地址: https://segmentfault.com/a/1190000003111071
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞