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`