【CSS】上下左右中央にたった2行書いて配置する方法　| コピペOK

突然ですが、文字などを上下中央に配置したいときにどのようにcssで書きますか。
私は恥ずかしながら何も考えずいつも上下中央に配置する時は、絶対値であるpositionで設定してました。

何も考えずにタラタラと長いコードを書いておりました…

こんな方におすすめ

• コーディング初心者の方
• 上下中央に子要素を配置したい時
• なるべく短くコードを書きたい方

上下中央にする方法は3つ！

基本的なコードは、こちらになります。
今回は画像はcssでバックグラウンドで表示しています。

container_textの部分を上下中央の真ん中に配置するやり方です！

<div class="container">
    <h2 class="container_text">タイトル</h2>
</div>

.container1{
  background: url(../img/bg.png) center/cover no-repeat;
  height: 300px;
  color: #fff;
}

①place-contentを使用する一番短いコード

See the Pen Untitled by journew (@icjvvxif-the-styleful) on CodePen.

①の方法で追記したのはたったこの2行！

  display: grid;
  place-content: center;

この2行を書くだけで上下左右中央に配置できます。
「text-align: center;」を全体に指定していれば左右中央はできますが、
していない場合でも中央に配置ができます。

2024年現在では全てのブラウザで表示可能となっているので、
割とシンプル目なデザインだったりする場合は、こちらのコードを書くと短縮したすっきりとしたものになります。

簡単に説明すると、
place-contentでは縦方向と横方向を一気に設定ができ、
centerと書くことで上下左右中央に表示ができるということです。

②positionを使用して自由自在に配置するコード

See the Pen Untitled by journew (@icjvvxif-the-styleful) on CodePen.

自由に配置をできるpositionを使った方法。
こちらは汎用性も高く、中央以外でも好きな場所に配置できるのでいいですね。

ただどうしても記載するコードが増えます。。
また子要素の大きさが大きすぎる場合ずれることがあります。

.container2{
  position: relative;
}
.container2_text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

③flexを使用したいつでも利用できるコード

See the Pen Untitled by journew (@icjvvxif-the-styleful) on CodePen.

こちらは3行のコード追加でできます。
justify-contentで横方向の位置調整、 align-itemsで縦方向の位置調整をしています。

display: flex;
  justify-content: center;
  align-items: center;

おわりに。

これじゃなきゃダメ、というやり方はありませんが、
誰が見てもわかりやすいコードだったり、
メンテナンスしやすいコード、行数を少なく簡潔に書くことは、
webデザイナーとしても、コーダーとしても大事な点です。

慣れるまではなかなかやり方を変えるのは難しいかもしれませんが、色々と試していきましょう！

意外と簡単だったねぇ