要素を中央揃えにする方法【CSS】 TECH
HTMLの要素(element)を中央揃えにする方法が分からない、忘れてしまった。
そういったお悩みをお持ちの方に向けて、この記事では解説していきます。
要素の中央揃えとは
そもそも要素の中央揃えとは、どういう状態かというと下の画像のように、左右方向の中央揃えと上下方向の中央揃えと上下左右の中央揃えがあります。
サイトの見た目(デザイン)や見やすさなどを考慮し、中央にした方が良い時に使うと思います。
どうやるか解説していきますが、まずは今回説明する中で共通で使用するHTMLとCSSをまずはご確認ください。
<div class="container">
<div class="item"></div>
</div>
.container{
background: blue;
width: 200px;
height: 200px;
}
.item{
background: red;
width: 100px;
height: 100px;
}
CSSで色や幅を分かりやすいようにスタイル指定しましたが、自由に変更してもらって大丈夫です。
左右の中央揃えの方法
marginを使う方法【おすすめ】
要素外側の余白の調整に使うmarginを使ったやり方です。
左右の中央揃えはこの方法を使う事が多いと思います。
実際のコードがこちら↓
.item{
margin-right: auto;
margin-left: auto;
}
この方法のメリットとしては、子要素(itemの方)の中身のCSSに影響がない事です。
どういう意味かというと、この後紹介するtext-alignを使う方法では、子要素(itemの方)の中にテキストや画像があった時に、勝手に全て中央揃えになってしまうという面倒な事が起きたりします。(テキストを左寄せにしたい場合、新たに左寄せのスタイル指定が必要になる)
text-alignを使う方法
テキストの中央揃えに使うtext-align: centerを使ったやり方です。
実際のコードがこちら↓
.container{
text-align: center;
}
.item{
display: inline-block;
}
この方法のメリットとしては、子要素(itemの方)の中のテキストや画像も中央揃えに出来る事です。
absoluteを使う方法
要素の位置を独立させるposition: absoluteを使ったやり方です。
実際のコードがこちら↓
.container{
position: relative;
}
.item{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
正直、特別これを使うような場面はないのかなと思いますが、一応紹介しました。
flexを使う方法
要素を横並びにできるdisplay: flexを使ったやり方です。
実際のコードがこちら↓
.container{
display: flex;
justify-content: center;
}
この方法のメリットとしては、同時に子要素の横並びができる事です。
上下の中央揃えの方法
flexを使う方法【おすすめ】
要素を横並びにできるdisplay: flexを使ったやり方です。
実際のコードがこちら↓
.container{
display: flex;
align-items: center;
}
縦方向に中央揃えするのは、この方法が一番簡単だと思います。
absoluteを使う方法
要素の位置を独立させるposition: absoluteを使ったやり方です。
実際のコードがこちら↓
.container{
position: relative;
}
.item{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
横方向の時と同様、absoluteを使えば出来ます。(absoluteは要素を自由に動かせますので)
上下左右の中央揃えの方法
absoluteを使う方法
要素の位置を独立させるposition: absoluteを使ったやり方です。
実際のコードがこちら↓
.container{
position: relative;
}
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
迷ったらこれ使う事が多いです。
flexを使う方法
要素を横並びにできるdisplay: flexを使ったやり方です。
実際のコードがこちら↓
.container{
display: flex;
justify-content: center;
align-items: center;
}
3行で上下左右中央にできるのが良いですね。
gridを使う方法
2次元レイアウトを自在にできるdisplay: gridを使ったやり方です。
実際のコードがこちら↓
.container{
display: grid;
place-items: center;
}
2行で上下左右中央にできるのが良いですね。たぶん結構最近の書き方だと思います。
おまけ
テキストの中央揃えについて
テキストだけ中央揃えにする時は、若干スタイルの指定方法が変わってくると思うので、それもおまけで紹介します。
左右を中央揃えにする場合↓
<div class="container">
<p class="item">テキスト</p>
</div>
.container{
background: blue;
width: 200px;
height: 200px;
text-align: center;
}
上下を中央揃えにする場合↓
<div class="container">
<p class="item">テキスト</p>
</div>
.container{
background: blue;
width: 200px;
height: 200px;
}
.item{
line-height: 200px;
}
まとめ
今回紹介した方法以外にも、中央揃えにする方法はあると思います。また、今回紹介した方法が最適でない場合もあると思いますので、色々試してみてください。
個人的にまとめるなら、左右中央はmargin、上下中央はflex、上下左右中央はabsoluteを使えば良いんじゃないかと思ってます。