【CSS】要素を中央寄せする方法７選

こんにちは！TakeHawkです！

今回は、CSSで要素を中央寄せする方法を7つ紹介していきます！

【左右中央寄せ1】text-align: center

<style>
.example1{
    /*コレ*/text-align: center;
    background: #eeeeee;
    border: 1px solid #999;
}
</style>
<div class="example1"><img src="http://takehawk.net/wp-content/uploads/2024/08/20240829-2.jpeg" width="200" alt="画像"></div>

text-alignはインライン要素の子要素の位置を指定するCSSです。

text-align: centerを指定すると左右中央寄せにできます。

主なインライン要素のタグは、img、p、h1～h6など。

【左右中央寄せ2】margin: 0 auto

<style>
.example2{
    background: #eeeeee;
    border: 1px solid #999;
}
.example2 img{
    /*コレ*/display: block;
    /*コレ*/margin: 0 auto;
}
</style>
<div class="example2"><img src="http://takehawk.net/wp-content/uploads/2024/08/20240829-2.jpeg" width="200" alt="画像"></div>

画像は本来インライン要素ですが、display: blockを指定することでブロック要素にすることができます。

ブロック要素はmargin: 0 autoで左右中央寄せできます。
上下の余白は0で、左右の余白が自動調整する動きから中央に寄ります。

インライン要素の画像と違い、ブロック要素にすると画像下にある空白を消すことができます。

主なブロック要素のタグは、divなど。

【左右中央寄せ3】display: flex; justipfy-content:center

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    height: 200px;
    background: #eeeeee;
    border: 1px solid #999;
}
</style>
<div class="example3">
    <img src="http://takehawk.net/wp-content/uploads/2024/08/20240829-2.jpeg" width="200" alt="画像">
</div>

display:flexは要素の位置調整をするCSSです。

子要素が１つだけであれば、justify-content:center　で左右中央寄せにすることができます。

【左右中央寄せ4】position: absolute; left: 50%; transform: translatex(-50%);

<style>
.example4{
    /*コレ*/position: relative;
    height: 200px;
    background: #eeeeee;
    border: 1px solid #999;
}
.example4 img{
    /*コレ*/position: absolute;
    /*コレ*/left: 50%;
    /*コレ*/transform: translateX(-50%);
}
</style>
<div class="example4">
    <img src="http://takehawk.net/wp-content/uploads/2024/08/20240829-2.jpeg" width="200" alt="画像">
</div>

親要素にposition:relative、子要素にposition:absoluteを指定して、
子要素にleft: 50%、transform: translateX(-50%)を組み合わせると左右中央寄せができます。

【上下中央寄せ1】display: flex; align-items: center;

<style>
.example5{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    height: 200px;
    background: #eeeeee;
    border: 1px solid #999;
}
</style>
<div class="example5">
    <img src="http://takehawk.net/wp-content/uploads/2024/08/20240829-2.jpeg" width="200" alt="画像">
</div>

親要素の高さ(height)が決まってる場合、親要素にdisplay:flexを指定し、
子要素に、align-items:center で上下中央寄せにすることができます。

【上下中央寄せ2】position: absolute; top: 50%; transform: translateY(-50%);

<style>
.example6{
    /*コレ*/position: relative;
    height: 200px;
    background: #eeeeee;
    border: 1px solid #999;
}
.example6 img{
    /*コレ*/position: absolute;
    /*コレ*/top: 50%;
    /*コレ*/transform: translateY(-50%);
}
</style>
<div class="example6">
    <img src="http://takehawk.net/wp-content/uploads/2024/08/20240829-2.jpeg" width="200" alt="画像">
</div>

親要素にposition:relative、子要素にposition:absoluteを指定して、
子要素にtop: 50%、transform: translateY(-50%)を組み合わせると上下中央寄せができます。

まとめ

以上、CSSで要素を左右中央、上下中央寄せする方法をご紹介しました。