依赖项
将一个项目在另一个盒子里水平和垂直居中。
示例
点击下面代码块中的“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;来实现相同的居中效果。