CSS实现元素垂直居中

时间 2019-12-05

标签 css 实现元素垂直居中栏目 CSS 繁體版

原文原文链接

CSS实现元素垂直居中

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

1、父元素高度肯定的单行文本

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

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

CSS样式：chrome

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

2、父元素高度不肯定的多行文本

对于父元素高度不肯定的文本、图片等的块级元素的竖直居中能够设置相同的上下内边距（padding值）便可实现居中，这个数值没必要过大。浏览器

3、父元素高度肯定的多行文本

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

1.插入 `table`

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

<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样式：htm

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

由于 td 标签默认状况下就默认设置了 vertical-align 为 middle，因此咱们不须要显式地设置了。图片

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

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

<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样式：class

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

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

CSS实现元素垂直居中

CSS实现元素垂直居中

1、父元素高度肯定的单行文本

2、父元素高度不肯定的多行文本

3、父元素高度肯定的多行文本

1.插入 table

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

1.插入 `table`

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