[CSS] 套用水平垂直置中到文字或任何區塊 - 偵錯桐人

因為自己在設計網頁時都會忘記要怎麼做水平垂直置中，所以特別寫一篇來當筆記。

這邊第一次嘗試用CodePen 來讓訪客能同時比對程式碼和執行結果， ... 跳至主要內容 因為自己在設計網頁時都會忘記要怎麼做水平垂直置中，所以特別寫一篇來當筆記。

這邊第一次嘗試用CodePen來讓訪客能同時比對程式碼和執行結果，是個不錯的東西。

如果你也想要放到WordPress的話，可以試試CodePenEmbedBlock外掛。

文字類 首先來處理文字的部分，完整程式碼預覽放在這節最後。

水平置中 水平置中比較單純，直接在

或它上層的容器下text-align:center;就可以用了。

垂直置中 麻煩的就是垂直置中，CSS有個屬性叫做vertical-align:middle;，但是這只能用在display:inline或display:inline-block的元素中，而且它會影響到前後的元素對齊。

參考[30道難解的CSS排版]第1道：認識對齊I這篇文章，它的vertical-align是下在右邊那張圖上，但它影響的元素是左邊的文字。

圖片來源：iT邦幫忙 那我們要怎麼做才不會影響到別的元素？這時有個陌生卻很讚的東西出現了—偽元素。

偽元素有before和after可以用，它存在的位置是在容器中的最前或最後面。

簡單來說就是你可以將vertical-align下在這邊，而且不會影響到這個容器外的元素。

編寫邏輯 首先我們要在容器中下一個vertical-align:top;確保它是預設的向上對齊。

接下來在容器的before偽元素中指定一個寬為0、高100%、display:inline-block;並給它vertical-align:middle;，這樣它會存在於容器內最左邊，並影響所有右側的元素垂直對齊方式。

最後在容器內的

元素中下display:inline-block;，讓它變成行內元素。

可以點右上角Logo來自己修改測試 CodePenEmbedFallback 區塊類 區塊置中的部分，如果你有要做垂直置中的話就直接忽略水平置中的說明，直接跳到後面看。

水平置中(外距) 如果是小區塊的話常用padding來做到置中，這應該不需要說明。

而如果是要做為RWD的置中容器的話，用margin:auto;的方法會比較好。

編寫邏輯 給容器一個寬和高。

再給它自動左右外距margin:auto;，簡寫格式為margin:上下左右;。

CodePenEmbedFallback 水平置中(Flex) Flex是比較新也比較強大的系統，只要在最外層給它Flex相關屬性就可以完全控制子層的長相，就不用去一直調整內外距。

編寫邏輯 目標容器(方框)外必須有一個父容器。

在父容器中下display:flex;，並給它justify-content:center;指定水平置中。

最後給目標容器一個合適的寬與高。

CodePenEmbedFallback 垂直置中(定位) 區塊的垂直對齊一樣有兩種做法，我們先從定位法來說起。

編寫邏輯 目標容器(方框)一樣需要一個父容器。

父容器必須有明確的高，寬要看用途，這邊直接用100%視圖高度來做。

接下來給目標容器一個明確的寬高。

切換成position:absolute;絕對定位。

設定左側與上方位移各50%，這時你會發現容器整個偏一邊，因為我們沒把寬高算進去。

用translate(-50%,-50%);來讓XY軸各位移50%容器的寬高回來，這行真的神，不需要自己去算數值。

最後你看到的就是垂直置中的容器。

如果你沒有要水平置中的話就將left拿掉、transform的內容改成translateY(-50%)。

CodePenEmbedFallback 垂直置中(Flex) Flex就簡單很多了，在父容器上操作就好。

編寫邏輯 將父容器改成display:flex;。

設定justify-content:center;水平對齊與align-content:center;垂直對齊，但現在它的垂直對齊沒作用。

所以要記得設定多行排版flex-wrap:wrap;。

完成。

CodePenEmbedFallback 留言版 取消回覆 熱門文章 [Minecraft]常用指令整理-創造/防噴/防爆/火蔓延/時間/天氣/重生範圍[Minecraft]OneBlock一格泥土的空島生存地圖安裝教學Valheim瓦爾海姆作弊密技指令使用教學-物件生成/地圖全開/鎖血無敵/創造模式[Windows]4步驟快速解決遊戲不用獨立顯示卡問題[Windows]如何取消Win11的工作列置中，使其靠左？[Minecraft]1.18版本官方遊戲伺服器架設教學[Minecraft]1.18版本光影著色器資源列表[CSS]套用水平垂直置中到文字或任何區塊[Google文件]表格/儲存格內容垂直置中操作步驟如何在Ubuntu20.04中安裝LINE通訊軟體？ Close首頁 Unity Csharp Minecraft 關於本站 隱私權政策