css 垂直居中的幾種方法

2021-08-18 03:53:19 字數 2238 閱讀 1190

1.水平垂直居中

html:


css:


.parent


.parent .child 


.parent .child img
注： ie修復: *display: inline-block; 由於vertical-align屬性與**一起使用，我們將父div設定為display: table, 並將子div設定為單元格display: talbe-cell.然後我 們可以安全的使用vertical-align：middle 來垂直單元格中的內容.此方法適用於多行文字，容器div隨內容動態增長，不幸的是不工作於ie6、ie7中。

2. 絕對定位和垂直拉伸

html:


content here


css:


.parent 


.parent .child
注： 子div處於父div中，它的頂部，底部，左側，右側的值都設為0。因為子div的高度和寬度都設定為小於父div的高度和寬度，所以這種定位是不行的。將子div的4個邊框都設定為auto會在頂部和底部以及左右兩側產生同等的邊距，這導致子div同時水平和垂直居中，不幸的是ie7以下不支援。

3.填充

html:


content here


css:


.parent 


.parent .child
注: 相同頂部和底部填充用於使子div在父div居中，並使子div中的文字居中。padding設定為"%"，允許兩個div動態增長。 如果任何元素的高度都設定絕對測量，則需要一些數學知識來確保頂部和底部填充相同。雖然這個方法是在容器上設定paddings，你可以翻轉事物，並在包含的元素中設定邊距。

4.lineheight

html:


content here


css:


.child
注: 垂直居中通過給子div（包含文字的那個）乙個大於字型大小的行高來實現。有些也設定乙個高度等於這個div上的行高，但我還沒有發現它的必要。這將工作於垂直居中一行文字，但不會工作在多行文字。

5.定位和負邊距

html:


css:


.parent


.parent .child
注: 子div通過定位和邊距定位在父div中心，通過將子div的頂部和左側的值設為50%，子div的左上角位於父div的中心。負頂部和左側等於元素高度和寬度的一半，向上拉伸子div讓它處於父div中心。此方法最適合於塊級元素，並且它需要知道子div的維度。

6.浮動分割槽

html:


;content here


css:


.parent


.parent .floater 


.parent .child
注: 這裡，乙個空的div設定為父div的一半高度並向左（或右）浮動。我們想要居中的div然後被清除，所以它的頂邊將直接位於浮動div的底邊下方。為了使子div的垂直中心向上，我們為浮動div新增乙個負的下邊距，它等於子div的一半高度。

7.借助translate()，此函式是css3的新特性.在不知道自身寬高的情況下，可以利用它來進行水平垂直居中.

//html:


我不知道寬高，但是我就是要水平垂直居中


//css


.wrap
與負margin-left和margin-top實現居中不同的是，margin-left必須知道自身的寬高，而translate可以在不知道寬高的情況下進行居中，tranlate（）函式中的百分比是相對於自身寬高的百分比，所以能進行居中。

但是相容性不是很好：internet explorer 10、firefox、opera 支援 transform 屬性。

internet explorer 9 支援替代的 -ms-transform 屬性（僅適用於 2d 轉換）。

safari 和 chrome 支援替代的 -webkit-transform 屬性（3d 和 2d 轉換）。

ie9以下不能使用哦，要注意這一點。

參考文章：

css垂直居中的幾種方法

1.lineheight方法 html class container id div1 src test.png 一行文字span div css container div1 div1 img效果 說明 設定了lineheight和容器高度相同，vertical align middle 需要知道...

CSS垂直居中的幾種方法

對於乙個前端開發人員，元素居中在布局中相當常見，水平居中實現非常非常容易，如果是行內元素，設定text align center就行，如果是塊級元素，通過設定邊距margin auto可實現水平居中。垂直居中實現起來相對較為較為麻煩，不囉嗦，直接上乾貨。主要有下面幾種方法 1 絕對定位方法 id m...

CSS水平垂直居中的幾種方法

直接進入主題！css div imghtml 效果圖 當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。css container inner html 效果圖 這裡，我們首先用top 50 和left 50 讓inner的座標原點 左上角 ...