html p置中html置中divhtml置中靠左html table置中html文字置中csshtml標題置中div table置中html置中

[CSS] 垂直置中的方法| PJCHENder 未整理筆記

文章推薦指數： 80 %
投票人數：10人

在學習網頁排版的過程中，置中（不論垂直或水平）一直是個相當麻煩的事，關於CSS ... 以下是之後示範中HTML Body 的部分： ... 文字的垂直置中方法​. Skiptomaincontent這個網站放置的是未發佈或未完整整理的筆記內容，若想檢視正式的筆記內容請到PJCHENder那些沒告訴你的小細節。

PJCHENderOfficialDocsBlogGitHubFacebookLinkedinSearchCSS[CSS]垂直置中的方法Onthispage在學習網頁排版的過程中，置中（不論垂直或水平）一直是個相當麻煩的事，關於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@CSSTricks6MethodsForVerticalCenteringWithCSS@vanseodesignPrevious[Note]計算邊框小技巧Next[CSS]CustomCounter文字的垂直置中方法flex（推薦）line-height（常用）table（少用）inline-block+vertical-align（少用）padding區塊（div）的垂直置中方法flex（建議）Position+Transform（常用）Position+Marginpadding:before+inline-block（少用）參考資料

請為這篇文章評分？

延伸文章資訊