初心者のためのCSSによる要素の中央揃え

CSSで<div>などの要素を中央に配置する方法をご紹介します。
この記事では、水平方向の中央揃えと垂直方向の中央揃えの両方について解説しており、初心者の方でも理解しやすいように、具体的な例とヒントを交えて説明しています。

関連項目

CSSによる要素の水平方向の中央揃え

要素自体を水平方向に中央揃えするには、その要素がブロックレベル要素かインラインレベル要素かによって方法が異なります。まずは、ブロックレベル要素とインラインレベル要素の違いについて説明します。

ブロックレベル要素とインラインレベル要素の違いの比較
比較項目 ブロックレベル要素 インラインレベル要素
要素の改行 親要素がdisplay: flex;、display: inline-flex;、display: grid;、display: inline-grid;のように、子要素を横並びに配置するプロパティでない場合、該当要素の前後には自動的に改行が入ります。 この要素には、前後の要素を改行させる性質がありません。
レベルを決定する
displayプロパティの値		 display: block;、display: table;、display: flex;、display: grid;
などがあります。		 display: inline;、display: inline-block;、display: inline-table;、display: inline-flex;、display: inline-grid;
などがあります。
代表的な要素 <div>、<h1>~<h6>、<p>
などの要素があります。		 <span>、<a>、<img>
などの要素があります。

要素自体を中央揃えにする方法：ブロックレベル要素をmargin-left: auto;とmargin-right: auto;で中央揃えにする

以下は、代表的なブロックレベル要素である<div>要素を中央揃えにする方法です。
<div>要素のdisplayプロパティの初期値はblockです。

HTML 
<div>ブロックレベル要素</div>
CSS 
div {
    width: 150px;
    height: 150px;
    background-color: pink;
    margin-left: auto;
    margin-right: auto;
}
結果画面

上記の例のように、ブロックレベル要素はmargin-left: auto;とmargin-right: auto;を使って中央揃えにすることができます。

以下は、インラインレベル要素のdisplayプロパティを変更してブロックレベル要素にし、要素自体を中央揃えにした例です。

HTML 
<span>インラインレベル要素</span>
CSS 
span {
    display: block; /* span要素のdisplayの初期値はinlineであり、インラインレベル要素をブロックレベル要素に変更しています */
    width: 150px;
    height: 150px;
    background-color: pink;
    margin-left: auto;
    margin-right: auto;
}
結果画面

上記の例のように、インラインレベル要素をブロックレベル要素に変更した後、margin-left: auto;とmargin-right: auto;を使って中央揃えにすることができます。

左右に余白がある親要素で中央揃えする方法：text-align: center;を使ってインラインレベルの子要素を中央揃えにする

HTML 
<div class="container">
    <span>インラインレベルの子要素</span>
</div>
CSS 
.container {
    background-color: orange;
    text-align: center; /* 左右に余白がある親要素の横幅を基準に、子要素のテキストや画像などのインラインレベルコンテンツを中央揃えにします */
}
.container span {
    background-color: pink;
}
結果画面

左右に余白がある親要素で中央揃えする方法：display: flex;とjustify-content: center;、align-items: center;を使って、ブロックレベル要素やインラインレベルの子要素を中央揃えにする

左右に余白がある親要素で中央揃えする方法：display: flex;とjustify-content: center;、align-items: center;を使ってブロックレベル要素を中央揃えにする

HTML 
<div class="container">
    <div>ブロックレベルの子要素</div>
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* 子要素（ブロックレベル要素、インラインレベル要素）を横（水平）方向の中央に揃えます */
}
.container div {
    width: 170px;
    height: 170px;
    background-color: pink;
}
結果画面

左右に余白がある親要素で中央揃えする方法：display: flex;とjustify-content: center;、align-items: center;を使ってインラインレベルの子要素を中央揃えにする

HTML 
<div class="container">
    <span>インラインレベルの子要素</span>
</div>
CSS 
.container {
    background-color: orange;
    display: flex;
    justify-content: center; /* 子要素（ブロックレベル要素、インラインレベル要素）を横（水平）方向の中央に揃えます */
}
.container span {
    background-color: pink;
}
結果画面

CSSで要素を縦（垂直）方向に中央揃えにする方法

親要素にdisplay: flex;とalign-items: center;を指定する

この方法はブロックレベル要素およびインラインレベル要素の両方に適用可能です。以下の例では、ブロックレベル要素である<div>要素を例として示しています。

HTML 
<div class="container">
    <div>ブロックレベルの子要素</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    display: flex;
    align-items: center; /* 子要素（ブロックレベル要素、インラインレベル要素）を縦（垂直）方向の中央に揃えます */
}
.container div {
    width: 170px;
    height: 170px;
    background-color: pink;
}
結果画面

親要素と子要素にpositionとtransformプロパティを使用する方法

この方法は、ブロックレベル要素およびインラインレベル要素の両方に適用可能です。以下の例では、ブロックレベル要素である<div>要素を例にしています。

HTML 
<div class="container">
    <div>ブロックレベルの子要素</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    position: relative;
}
.container div {
    width: 170px;
    height: 170px;
    background-color: pink;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
結果画面

CSSで要素を横（水平）および縦（垂直）方向に中央揃えにする方法

左右に余白がある親要素にdisplay: flex;、justify-content: center;、align-items: center;を指定する

この方法は、ブロックレベル要素およびインラインレベル要素の両方に適用可能です。以下の例では、ブロックレベル要素である<div>要素を例にしています。

HTML 
<div class="container">
    <div>ブロックレベルの子要素</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    display: flex;
    justify-content: center; /* 子要素を横（水平）方向の中央に揃えます */
    align-items: center; /* 子要素を縦（垂直）方向の中央に揃えます */
}
.container div {
    width: 170px;
    height: 170px;
    background-color: pink;
}
結果画面

親要素と子要素にpositionとtransformプロパティを使用する方法

この方法は、ブロックレベル要素およびインラインレベル要素の両方に適用可能です。以下の例では、ブロックレベル要素である<div>要素を例にしています。

HTML 
<div class="container">
    <div>ブロックレベルの子要素</div>
</div>
CSS 
.container {
    background-color: orange;
    height: 300px;
    position: relative;
}
.container div {
    width: 170px;
    height: 170px;
    background-color: pink;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
結果画面

参考資料

関連項目