如何垂直居中乙個元素

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

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

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 居中乙個浮動元素...