如何垂直居中乙個元素

2021-09-28 23:40:44 字數 1129 閱讀 3203

前兩天剛寫完如何水平居中乙個元素,今天把垂直的情況補上。

相比於水平居中,垂直居中的情況就少多了。

1、行級元素的垂直居中

這種情況比較簡單,只需要設定line-height和height相等即可,也沒什麼可延伸的。

2、塊級元素的垂直居中

2.1、父元素高度不固定

其實我認為這種情況不用討論,正常情況下高度不固定,子元素會充滿父元素,不過非要使子元素距父元素有一定間距也不是沒辦法:

可以設定padding-top和padding-bottom相等來使子元素居中並且和父元素有一定距離。

2.2、父元素高度固定

針對這種情況,要實現垂直居中,只要以下兩點即可:

1)父元素line-height和height相等

2)子元素設定 vertical-align:middle;// 垂直居中對齊

display:inline|inline-block 塊級元素轉行級元素

注意:這裡有個小細節需要注意,對於display:inline的情況,這兩條就可以實現,但是有個弊端就是我們沒辦法給子元素設定高度(因為這時已經變成行級元素了),

所以對於有子元素有高度要求的情況下,我們可以設定 display:inline-block ,但是大多數情況下這樣設定後我們會發現子元素的內容會發生偏移,如下圖:

這時什麼原因呢?

其實,這時子元素繼承了父元素的line-height屬性,使子元素內容發生了偏移。解決辦法也很簡單,只需要給子元素同樣設定乙個新的line-height和height相等即可

更多專業前端知識,請上

【猿2048】www.mk2048.com

如何垂直居中乙個元素

前兩天剛寫完如何水平居中乙個元素,今天把垂直的情況補上。相比於水平居中,垂直居中的情況就少多了。1 行級元素的垂直居中 這種情況比較簡單,只需要設定line height和height相等即可,也沒什麼可延伸的。2 塊級元素的垂直居中 2.1 父元素高度不固定 其實我認為這種情況不用討論,正常情況下...

如何居中乙個元素

利用 text align center 可以實現在塊級元素內部的行內元素水平居中。此方法對inline inline block inline table和inline flex元素水平居中都有效。parent此外,如果塊級元素內部包著也是乙個塊級元素,我們可以先將其由塊級元素改變為行內塊元素,再...

如何居中乙個div?如何居中乙個浮動元素?

居中乙個div 給div設定乙個寬度,margin 0px auto。position absolute top 50 left 50 transform translate 50 50 彈性盒居中 justify content center align items center 居中乙個浮動元素...