依賴項
將一個專案在另一個盒子裡水平和垂直居中。
示例
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
html
<div class="container">
<div class="item">I am centered!</div>
</div>
css
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
使用彈性盒（flexbox）
要將一個盒子在其容器內居中，首先透過將其display屬性設定為flex，將包含盒子變成一個彈性容器。然後將align-items設定為center以實現垂直居中（在塊軸上），將justify-content設定為center以實現水平居中（在行內軸上）。將一個盒子居中於另一個盒子中就是這麼簡單！
HTML
html
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
css
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
我們為容器設定了一個高度，以證明內部專案確實在容器內垂直居中。
結果
除了在容器上應用align-items: center;，你還可以透過在內部專案本身上設定align-self為center來垂直居中內部專案。
使用網格（grid）
將一個盒子居中於另一個盒子中的另一種方法是，首先將包含盒子變成一個網格容器，然後將其place-items屬性設定為center，以使其專案在塊軸和行內軸上都居中對齊。
HTML
html
<div class="container">
<div class="item">I am centered!</div>
</div>
CSS
css
div {
border: solid 3px;
padding: 1em;
max-width: 75%;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
.container {
height: 8em;
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
font: 1.2em sans-serif;
display: grid;
place-items: center;
}
結果
除了在容器上應用place-items: center;，你還可以透過在容器上設定place-content: center;，或者透過在內部專案本身上應用place-self: center或margin: auto;來實現相同的居中效果。