CSS 排版詞條 3-19

對齊與置中Alignment & Centering

也常叫做：對齊、置中、Centering

你可能會這樣說

想把一段文字或按鈕放在畫面正中間，試了各種方法不是只置中一半，就是左右置中了、上下又跑掉。

置中在網頁裡分成兩種：文字置中（一行內容的對齊）與區塊置中（整個容器在父層裡的位置）。垂直置中是另一門課，經典解法是 Flexbox 加一行設定。

跟 AI 說清楚你要哪一種：「這行字置中」「這張卡片水平置中」「整個區塊垂直加水平置中」，三種的寫法完全不同。

另外記住「置中文字不利閱讀」：短標題置中沒問題，超過三行的段落請靠左，讀者的眼睛才不用每行重新找開頭。

主軸對齊交叉軸對齊排列方向

水平與垂直是兩個獨立的開關；先把方向切到「橫排」，再分別玩主軸與交叉軸，置中一次到位。

圖 3-19　主軸、交叉軸分開調——所謂「置中」其實是兩件事。

中文就可以

幫我處理這頁的對齊：
首屏的標題、副標、按鈕整組水平置中，並在區塊內垂直置中。
說明段落的文字維持靠左，只讓標題置中。
下方三張卡片的頂部與底部對齊，中間那張不要比別的高。
頁尾的社群圖示靠右對齊，與著作權文字同一條基線。