[筆記] CSS垂直置中的方法 - PJCHENder

2024-11-29

文章推薦指數： 80 %

投票人數：10人

以下是之後示範中HTML Body 的部分：.

要置中的內容

. 後面則是搭配上不同的CSS作為 ... //Skiptocontent 2015年4月15日在學習網頁排版的過程中，置中（不論垂直或水平）一直是個相當麻煩的事，關於CSS中置中的方式，網路上可以找到非常多，這裡的整理算是我自己的一個筆記吧，如果內容有問題在麻煩告知。

以下是之後示範中HTMLBody的部分：

要置中的內容

後面則是搭配上不同的CSS作為展示。

文字的垂直置中方法 flex（推薦） Flex在瀏覽器的支援度已經相當普及，除非有需要支援IE的使用，不然基本上都可以安心使用了，簡單好用：邏輯：display:flex搭配align-items:center即可將裡面的元素達到垂直置中的效果。

.outer{ background-color:#95afba; } .inner{ background-color:#d5e1a3; display:flex;/*★*/ height:300px; align-items:center;/*★*/ } line-height（常用）很好用的方法，就是設定div的高度和文字高度一樣，就可以簡單達到垂直置中的效果。

邏輯：當DIV區塊的高度等同於文字行高的，文字就會被放在中間。

.outer{ background-color:#95afba; } .inner{ background-color:#d5e1a3; height:300px;/*★*/ line-height:300px;/*★*/ } 效果如下： table（少用）邏輯：把要垂直置中的內容當作是table來操作，所以可以用vertical-align的指令。

.outer{ background-color:#95afba; display:table;/*★*/ height:300px; } .inner{ background-color:#d5e1a3; display:table-cell;/*★*/ vertical-align:middle;/*★*/ } inline-block+vertical-align（少用）透過這個方法，我們可以將多行文字也做一個垂直置中，這個方法也可以用來幫區塊作垂直置中： .inner{ background-color:#95afba; height:400px; font-size:0; } .inner:before{ content:"";/*★*/ height:100%;/*★*/ display:inline-block;/*★*/ vertical-align:middle;/*★*/ } p{ display:inline-block;/*★*/ vertical-align:middle;/*★*/ font-size:1rem; } padding 在下面文章一起進行說明。

區塊（div）的垂直置中方法 flex（建議）邏輯：display:flex搭配align-items:center即可將裡面的元素達到垂直置中的效果。

.outer{ background-color:#95afba; position:relative;/*★*/ height:400px; display:flex;/*★*/ align-items:center;/*★*/ } .inner{ background-color:#d5e1a3; height:100px; } Position+Transform（常用）這個方法是利用絕對定位absolute的方式，搭配上transform來操作。

這個想法的概念是這樣，首先先用absolute來做絕對定位，當我輸入top:50%時，這個

的左上角，會被移到高度為50%的地方。

但這樣並沒有真的把div區塊置中，因為它超過了，所以我們需要搭配上transform的屬性，透過負值的方法把它往上調，而往上調的高度就是這個div元素高度的一半，所以使用translate(-50%)，這時候，這個innerdiv就會被垂直置中了。

邏輯：先利用position:absolute把top:50%設在50%；接著再透過transform:translateY(-50%)把超過的部分修正回來，達到垂直置中。

.outer{ background-color:#95afba; position:relative;/*★*/ height:400px; } .inner{ background-color:#d5e1a3; position:absolute;/*★*/ top:50%;/*★*/ height:100px; transform:translateY(-50%);/*★*/ } Position+Margin 這個方法會設定top和bottom的位置，讓它不可能符合，再透過margin的方式，讓它變成垂直置中。

這個方法同時設定top和bottom為0，使得innerdiv完全不可能符合，最後再透過margin這個指令，讓它達到垂直置中的效果。

類似的方法，也可以讓它達到水平置中，只要在inner的地方，多加上left:0;right:0，就可以達到水平置中。

.outer{ background-color:#95afba; position:relative;/*★*/ height:400px; } .inner{ background-color:#d5e1a3; height:100px; width:100px; position:absolute;/*★*/ top:0;/*★*/ bottom:0;/*★*/ margin:auto;/*★*/ } padding 當我們的div沒有設定高度時，我們可以透過padding的指令來達到垂直置中的效果。

邏輯：透過上下都增加100px的padding就可以，讓inner這個區塊達到垂直置中的效果。

inner也可以透過加上padding:50px0，這樣的方式，來達到裡面也垂直置中的效果，而且也可以達到文字的垂直置中。

.outer{ background-color:#95afba; padding:100px0;/*上下都增加100px的padding*/ } .inner{ background-color:#d5e1a3; width:100px; } :before+inline-block（少用）這個方法，透過CSS當中的偽元素（:before）加上inline-block來達到這樣的效果。

想法：在outer的前面加上一個偽元素，同時要inline-block的方式來呈現，這樣就可以再透過vertical-align來加以置中。

如果inner這個div想要水平置中的話，可以在outer的地方加上text-align:center就可以達到水平置中的效果了。

.outer{ background-color:#95afba; height:400px; text-align:center;/*如果要水平置中*/ } /*★*/ .outer:before{ content:""; height:100%; display:inline-block; vertical-align:middle; } .inner{ background-color:#d5e1a3; width:100px; height:100px; display:inline-block;/*★*/ vertical-align:middle;/*★*/ } 參考資料 CenteringinCSS:ACompleteGuide@CSSTricks 6MethodsForVerticalCenteringWithCSS@ vanseodesign Share: 較新的文章較舊的文章首頁 0 意見: 張貼留言