.login {
padding: 40px;
background: white;
border: 2px solid #333;
}


輸出結果

為什么這種方法有效

Flexbox將容器及其子元素視為一個靈活的布局系統(tǒng)，會自動根據主軸和交叉軸的方向來分配空間。因此，無論元素的尺寸如何，都可以輕松地被放置在容器的中間位置。這種特性使得Flexbox非常適合用于居中顯示模態(tài)窗口、標題欄或其他動態(tài)內容。

無論在以下何種情況下，這種方法依然有效：

• 未知的高度

• 未知的寬度

• 響應式布局

• 動態(tài)內容

正因如此，它如今被廣泛使用。

實際應用案例

開發(fā)人員通常會利用Flexbox來實現元素的中心對齊，從而將重要的界面元素放置在屏幕的正中央。例如，這種方法可以用來使模態(tài)對話框、加載提示符、標題欄內容以及其他全屏UI組件處于居中位置。因此，無論屏幕尺寸如何變化，這些元素都能保持視覺上的平衡，也更容易被用戶注意到。

方法4：使用CSS Grid進行中心對齊（最簡單的方法）

CSS Grid提供了最為簡潔的方式，用于實現元素的水平和垂直居中。只需將容器的樣式設置為display: grid;，并應用place-items: center;，就能用短短幾行代碼將任何子元素精確地放置在屏幕中央。這種方法之所以有效，是因為Grid提供了內置的對齊控制功能，能夠自動處理沿兩個軸的方向進行定位的操作。

示例

<div class="wrapper">
??<div class="box">>已經居中！</div>>
</div>

.wrapper {
??height: 100vh;
??display: grid;
??place-items: center;
}
.box {
  width: 200px;
  padding: 30px;
  text-align: center;
  background: white;
  border: 2px solid #333;
}

輸出結果

在這個示例中，.wrapper充當網格容器，而.box元素則成為網格中的一個個單元格。place-items: center;這一屬性會自動將.box元素在容器的水平和垂直方向上居中排列。

100vh表示占據視口高度的100%，也就是瀏覽器窗口可見區(qū)域的全部高度。當為容器設置height: 100vh;時，該容器會從上到下填充整個屏幕。

為什么這種方法有效

place-items: center這一屬性實際上是由兩個CSS Grid對齊屬性組合而成的簡寫形式：

align-items: center;
justify-items: center;

• align-items用于控制元素在網格中的垂直對齊方式。

• justify-items用于控制元素在網格中的水平對齊方式。

通過將這兩種方法結合在一條代碼中，就可以自動實現元素在兩個方向上的居中，而無需額外的布局規(guī)則。

何時優(yōu)先使用網格布局而非彈性布局

當您只需要簡單的元素居中效果，且不需要復雜的布局控制時，CSS網格布局是理想的選擇。這種布局方式能讓代碼保持簡潔易讀。

在以下情況下使用網格布局：

• 只需對單個元素進行居中處理時

• 不需要構建復雜的布局結構時

• 希望代碼盡可能簡單明了時

在以下情況下使用彈性布局：

• 需要同時對多個元素進行對齊時

• 布局方向非常重要（例如橫排與豎排的區(qū)別）時

• 需要精確控制元素之間的間距時

方法5：使用絕對定位結合變換實現居中

這種方法通過絕對定位結合CSS變換來實現元素的居中，即使不使用彈性布局或網格布局，該方法也同樣有效。具體來說，只需將元素的`position`屬性設置為`absolute`，然后通過`top: 50%;`和`left: 50%;`將其移動到其父元素的中間位置即可。

示例：居中彈出窗口

<div class="container">
??<div class="popup">>我被居中了
</div>

.container {
??position: relative;
??height: 400px;
}

.popup {
??position: absolute;
??top: 50%;
??left: 50%;
??transform: translate(-50%, -50%);
}

輸出結果

原理說明

1. `top: 50%;`將元素的頂部邊緣移動到中間位置

2. `left: 50%;`將元素的左側邊緣移動到中間位置

3. `translate(-50%, -50%);`將元素整體向相反方向移動其寬度與高度的一半，從而使其真正居中

這樣，元素的實際中心點就會與其邊界對齊，而不是其角落。

補充說明

不使用變換時的情況：如果直接使用絕對定位，元素的左上角會成為居中點。

為了解決這個問題，就需要使用`transform: translate(-50%, -50%);`這條指令，它會使元素向相反方向移動其寬度與高度的一半，從而使其真正居中于容器內部。開發(fā)人員經常利用這種技術來制作彈出窗口、工具提示框或浮動UI組件。

實際應用案例

• 模態(tài)窗口

• 工具提示

• 浮動標簽

• 覆蓋層

方法6：使單行文本在容器中垂直居中

這種方法通過使用line-height屬性，使容器內的單行文本實現垂直居中。當你將line-height設置為與容器高度相同的值時，瀏覽器會將該文本放置在該空間的垂直中心位置，因為行框會自動擴展以均勻填滿整個容器。

示例：在按鈕中居中文本

<button class="btn">>點擊我</button>

.btn {
??height: 60px;
??line-height: 60px;
??text-align: center;
}

輸出結果

原理說明

這種技巧最適合用于高度固定的元素，比如按鈕、徽標或導航項。不過，只有當文本僅占一行時，這種方法才能可靠地發(fā)揮作用；如果文本分多行顯示，垂直對齊就會失效。

局限性

使用line-height來實現文本的垂直居中的主要局限在于：該方法僅適用于單行文本。如果文本需要分多行顯示，那么每行的line-height就無法與容器的高度保持一致，從而導致垂直對齊效果失效。

因此，這種方法并不適合用于段落、標題或任何可能超過一行長度的內容。它更適合用于按鈕、標簽等高度固定且僅包含單行文本的元素。

方法7：單元格布局法（雖古老但依然有用）

這種方法利用表格單元格的布局原理，使內容在垂直和水平方向上都實現居中。對于較老版本的CSS布局或電子郵件模板來說，這是一種非常可靠的技術。只需將容器的display屬性設置為table;，其子元素的display屬性設置為table-cell;，同時為該子元素添加vertical-align: middle;和text-align: center;，瀏覽器就會將這個子元素視為一個表格單元格，并自動將其內容居中顯示。

示例

<div class="outer">
??<div class="inner">>居中的文本
 

.outer {
??display: table;
??width: 100%;
??height: 300px;
}

(inner {
??display: table-cell;
??vertical-align: middle;
??text-align: center;
}

width: 300px;
margin: auto;

height: 100vh;

parent { position: relative; }

flex-direction: column;