要素を上下左右中央寄せする複数の方法を紹介！

2024年8月23日2024年12月11日

こんにちは！キャメルです！

今回は要素を上下左右中央に寄せる方法について解説します！

みなさんは要素を中央に寄せたい場合どのような方法を使ってますか？

Webサイトを構築する中で要素を中央寄せにしたい場面は必ず出てきます。

ぜひこの記事を読んで、複数の方法について頭に入れておきましょう！

よく使う方法はこの4つ

insetとmarginの組み合わせ
flexboxを使う方法
gridを使う方法
positionを利用した方法

・まずはHTMLの参考コードを記述します

--- html ---
<div class="box">
    <div class="box__item"></div>
</div>

親要素のboxクラスの中に子要素のbox_itemを配置します。

・基本のCSSスタイルは以下のように当てます

--- CSS ---
.box {  
  width: 300px;  
  height: 300px;  
  border: 1px solid #000;
}

.box__item {  
  width: 50px;  
  height: 50px;  
  background-color: red;
}

ブラウザで見てみるとこのようになります。

親要素を300pxの正方形の枠として

その中に50pxの正方形のアイテムが配置

それではここから各パターンを見ていきましょう！
新たに追加したCSSは緑で記述していくよっ！

1. insetとmarginの組み合わせ

--- CSS ---
.box {  
  width: 300px;  
  height: 300px;  
  border: 1px solid #000;
  position: relative;
}

.box__item {  
  width: 50px;  
  height: 50px;  
  background-color: red;
  position: absolute;
  inset: 0;
  margin: auto;
}

この書き方は割と新しい方法のようです。

「inset」はtop・right・bottom・leftの一括指定プロパティ
「margin: auto;」を指定しないと中心に寄らないので注意！

めちゃくちゃ楽ですねっ！

2. flexboxを使う方法

--- CSS ---
.box {  
  width: 300px;  
  height: 300px;  
  border: 1px solid #000;
  display: flex;  
  align-items: center;  
  justify-content: center;
}

.box__item {  
  width: 50px;  
  height: 50px;  
  background-color: red;
}

flexboxは横並びにするイメージがあるかもしれませんがそれ以外にもかなり応用が効きます。

align-itemsで垂直方向の真ん中に寄せ、justify-contetで水平方向の真ん中に寄せる

3. gridを使う方法

--- CSS ---
.box {  
  width: 300px;  
  height: 300px;  
  border: 1px solid #000;
  display: grid;  
  place-items: center;
}

.box__item {  
  width: 50px;  
  height: 50px;  
  background-color: red;
}

「place-items」は「aligh-items」と「justify-items」の一括指定プロパティ

つまり下記のように書いても同じですね！

--- CSS ---
.box {  
  width: 300px;  
  height: 300px;  
  border: 1px solid #000;
  display: grid;  
  align-items: center;  
  justify-items: center;
}

4. positionを利用した方法

--- CSS ---
.box {  
  width: 300px;  
  height: 300px;  
  border: 1px solid #000;
  position: relative;
}

.box__item {  
  width: 50px;  
  height: 50px;  
  background-color: red;
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%,-50%);
}