CSS實現(xiàn)元素垂直居中

RobinTang 發(fā)布于2019-08-28 18:14 / 3574人閱讀

摘要：實現(xiàn)元素垂直居中對元素的垂直居中針對于單行元素和多行元素將分情況討論。三父元素高度確定的多行文本多行文本，圖片，塊級元素皆屬于這種情況，對此的垂直居中主要有兩種方法。插入對要垂直居中的元素外插入包括標(biāo)簽，同時設(shè)置。

CSS實現(xiàn)元素垂直居中

對元素的垂直居中針對于單行元素和多行元素將分情況討論。

一、父元素高度確定的單行文本

父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和 line-height 高度一致來實現(xiàn)的。
HTML結(jié)構(gòu)：


  Hello World!!!

CSS樣式：

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

對于父元素高度不確定的文本、圖片等的塊級元素的豎直居中可以設(shè)置相同的上下內(nèi)邊距（padding值）即可實現(xiàn)居中，這個數(shù)值不必過大。

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

多行文本，圖片，塊級元素皆屬于這種情況，對此的垂直居中主要有兩種方法。

1.插入 table

對要垂直居中的元素外插入 table (包括tbody、tr、td)標(biāo)簽，同時設(shè)置 vertical-align：middle。
另需注意，css 中有一個用于豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。
HTML結(jié)構(gòu)：


  
    
      
        
          
            Hello World!!!
            Hello World!!!
            Hello World!!!
            Hello World!!!
            Hello World!!!

CSS樣式：

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

因為 td 標(biāo)簽?zāi)J情況下就默認設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。

2.設(shè)置塊級元素的 display 為 table-cell

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式。
HTML結(jié)構(gòu)：


  
    Hello World!!!
    Hello World!!!
    Hello World!!!
    Hello World!!!
    Hello World!!!

CSS樣式：

這種方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7。

GPU云服務(wù)器云服務(wù)器實現(xiàn)垂直居中垂直居中水平垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111113.html

相關(guān)文章

【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實現(xiàn)在塊級元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對的問題，也是基本技能之一。今天有時間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評論0 收藏0
CSS/CSS3 實現(xiàn) 居中（水平&垂直）

摘要：，水平居中行內(nèi)元素把行內(nèi)元素放在一個屬性塊元素中，然后設(shè)置父層元素屬性居中，水平居中塊狀元素設(shè)置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設(shè)置父層元素屬性居中，水平居中多個塊狀元素布局實現(xiàn)把塊狀元素的父元素屬性和，如下設(shè)置， 1，水平居中：行內(nèi)元素把行內(nèi)元素放在一個屬性塊（display：block）元素中，然后設(shè)置父層元素屬性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 評論0 收藏0