CSS 布局 - 水平和垂直對齊

元素居中

水平和垂直居中的元素

居中對齊元素

要使塊元素（例如 <div> ）水平居中，請使用 margin: auto;。

設置元素的寬度將防止其延伸到容器的邊緣。

然后，元素將占用指定的寬度，剩余空間將在兩個外邊距之間平均分配：

這個 div 元素是居中的。

實例

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

親自試一試

注意：如果未設置 width 屬性（或將其設置為 100％），則居中對齊無效。

居中對齊文本

如果僅需在元素內居中文本，請使用 text-align: center;：

這段文本是居中的。

實例

.center {
  text-align: center;
  border: 3px solid green;
}

親自試一試

提示：有關如何對齊文本的更多例子，請參見 CSS 文本 這一章。

居中對齊圖像

如需居中圖像，請將左右外邊距設置為 auto，并將其設置為塊元素：

實例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

親自試一試

左和右對齊 - 使用 position

對齊元素的一種方法是使用 position: absolute; :

這個 div 是右對齊的。

實例

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

親自試一試

注意：絕對定位的元素將從正常流中刪除，并可能出現元素重疊。

左和右對齊 - 使用 float

對齊元素的另一種方法是使用 float 屬性：

實例

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

親自試一試

注意：如果一個元素比包含它的元素高，并且它是浮動的，它將溢出其容器。您可以使用 clearfix hack 來解決此問題（請看下面的例子）。

clearfix Hack

然后我們可以向包含元素添加 overflow: auto;，來解決此問題：

實例

.clearfix {
  overflow: auto;
}

親自試一試

垂直對齊 - 使用 padding

有很多方法可以在 CSS 中垂直對齊元素。一個簡單的解決方案是使用上下內邊距：

我是垂直居中的。

實例

.center {
  padding: 70px 0;
  border: 3px solid green;
}

親自試一試

如需同時垂直和水平對齊，請使用 padding 和 text-align: center;：

我是水平和垂直居中的。

實例

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

親自試一試

垂直對齊 - 使用 line-height

另一個技巧是使用其值等于 height 屬性值的 line-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，則另一種解決方案是使用 position 和 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 的知識。