要件
あるボックス内のアイテムを、別のボックスの中心に水平方向および垂直方向に配置します。
レシピ
以下のコードブロックの "Play" をクリックすると、この例を MDN Playground で開きます。
html
<div class="container">
<div class="item">中央に配置されています！</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;
}
フレックスボックスを使用
あるボックスを別のボックスの中央に配置するには、まず、親ボックスをフレックスコンテナーにするため、その display プロパティを flex に設定します。次に、垂直方向（ブロック軸）の中央揃えにするために align-items を center に、水平方向（インライン軸）の中央揃えにするために justify-content を center に設定します。それだけです！
HTML
html
<div class="container">
<div class="item">中央に配置されています！</div>
</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 に設定することで、内部のアイテムを垂直方向に中央揃えにすることも可能です。
グリッドを使用
あるボックスを別のボックスの中央に配置するもう一つの方法は、まず外側のボックスをグリッドコンテナーにし、その place-items プロパティを center に設定して、ブロック軸とインライン軸の両方でアイテムを中央揃えにすることです。
HTML
html
<div class="container">
<div class="item">中央に配置されています！</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; を適用することで、同じ中央揃えを実現できます。