CSS 佈局 - 水平和垂直居中
居中元素
水平和垂直
居中對齊元素
要水平居中塊級元素（如 `<div>`），請使用 margin: auto;
設定元素的寬度將防止其拉伸到容器邊緣。
然後，元素將佔據指定的寬度，剩餘的空間將在兩個邊距之間平均分配。
此 div 元素已居中。
注意： 如果未設定 width 屬性（或設定為 100%），則居中對齊無效。
居中文字
要僅居中文字，請使用 text-align: center;
此文字已居中。
提示：有關對齊文字的更多示例，請參閱 CSS 文字章節。
居中圖片
要居中圖片，請將左右外邊距設定為 auto 並將其設為 塊級 元素
左右對齊 - 使用定位
對齊元素的其中一種方法是使用 position: absolute;
在我年輕而脆弱的歲月裡，我父親給了我一些建議，我一直銘記在心。
示例
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
自己動手試一試 »
注意：絕對定位的元素會從正常文件流中移除，並且可能與其他元素重疊。
左右對齊 - 使用 float
對齊元素的另一種方法是使用 float 屬性。
清除浮動技巧
注意：如果一個元素比包含它的元素高，並且它被浮動，它將溢位其容器。您可以使用“clearfix hack”來解決此問題（請參閱下面的示例）。
沒有清除浮動
有清除浮動
然後，我們可以將 clearfix hack 新增到包含元素中以解決此問題。
垂直居中 - 使用 padding
CSS 中有多種方法可以實現元素垂直居中。一個簡單的解決方案是使用上下 padding。
我已垂直居中。
要同時實現垂直和水平居中，請使用 padding 和 text-align: center。
我已垂直和水平居中。
垂直居中 - 使用 line-height
另一個技巧是將 line-height 屬性的值設定為等於 height 屬性的值。
我已垂直和水平居中。
示例
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文字有多行，請新增以下內容： */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
自己動手試一試 »
垂直居中 - 使用 position 和 transform
如果 padding 和 line-height 不是選項，另一個解決方案是使用定位和 transform 屬性。
我已垂直和水平居中。
示例
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
自己動手試一試 »
提示：您將在我們的 2D 變換章節中瞭解有關 transform 屬性的更多資訊。
垂直居中 - 使用 Flexbox
您也可以使用 flexbox 來居中元素。請注意，IE10 及更早版本不支援 flexbox。
示例
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
自己動手試一試 »
提示：您將在我們的 CSS Flexbox 章節中瞭解有關 Flexbox 的更多資訊。
