中央揃えにする方法5選 | HTML / CSS基礎

HTML / CSS を勉強していると、かなりの確率で遭遇するのが、

中央揃えできない…

問題です。

実際のWeb制作でも、

ボタンを中央に置きたい
文字を中央揃えしたい
画像を真ん中にしたい
ローディング画面を中央にしたい

など、「中央揃え」は何度も登場します。

しかし CSS には中央揃えの方法が複数あり、

何を中央にしたいのか

によって使い方が変わります。

今回は、現場でもよく使われる中央揃え方法を5つ紹介します。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

1. text-align: center

最も基本的な中央揃えです。

主に、

文字
inline要素

を中央揃えしたいときに使います。

HTML

<div class="box">
  文字を中央揃え
</div>

CSS

.box {
  text-align: center;
  border: 1px solid #333;
  padding: 20px;
}

結果

文字が中央に配置されます。

よくある勘違い

これは、

要素そのもの

を中央にするわけではありません。

中央になるのは、

要素の中身

です。

例えば、

<img>
<a>
<span>

なども中央にできます。

2. margin: 0 auto

ブロック要素そのものを中央にしたいときに使います。

かなり重要です。

HTML

<div class="card">
  カードです
</div>

CSS

.card {
  width: 300px;
  margin: 0 auto;

  border: 1px solid #333;
  padding: 20px;
}

なぜ中央になる？

auto が左右の余白を自動計算してくれるためです。

左余白 = 右余白

になるので、中央へ配置されます。

超重要ポイント

width が必要です。

例えば、

width: 100%;

だと横幅いっぱいなので中央になりません。

3. Flexbox で中央揃え

現在のWeb制作で最もよく使われる方法の1つです。

HTML

<div class="wrapper">
  <div class="item">
    中央です
  </div>
</div>

CSS

.wrapper {
  display: flex;

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

  height: 300px;
  border: 1px solid #333;
}

何が中央になる？

justify-content

で横方向、

align-items

で縦方向を中央にしています。

イメージ

justify-content → 横
align-items → 縦

です。

現場で超使う

例えば、

ローディング画面
モーダル
ボタン配置
カードUI
ナビゲーション

などで大量に使われます。

4. Grid で中央揃え

CSS Grid でも簡単に中央揃えできます。

CSS

.wrapper {
  display: grid;
  place-items: center;

  height: 300px;
  border: 1px solid #333;
}

place-items が便利

これは、

横 + 縦

を同時に中央揃えできます。

かなり短く書けます。

Flex と Grid の違い

初心者のうちは、

中央揃えだけなら
どちらでもOK

です。

ただし実務では、

1方向 → Flex
2次元レイアウト → Grid

という使い分けが多いです。

5. position を使った中央揃え

画面ど真ん中へ配置したいときによく使います。

CSS

.modal {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

なぜこれで中央になる？

まず、

top: 50%;
left: 50%;

で、

左上の角

が中央へ移動します。

しかしそれだと、

要素の左上

が中央に来てしまいます。

そこで、

transform: translate(-50%, -50%);

を使い、

自分自身の半分だけ戻す

ことで、本当の中央になります。

transform がよくわからない人へ

translate(X, Y)

です。

例えば、

translate(10px, 20px)

なら、

右へ10px
下へ20px

移動します。

どれを使えばいい？

かなり重要です

やりたいこと	方法
文字を中央	text-align
要素を中央	margin: auto
横 + 縦中央	flex
超シンプル中央	grid
画面中央固定	position

初心者がハマりやすいポイント

width がない

margin: auto;

しても中央にならない問題です。

高さがない

Flex の縦中央でよくあります。

height: 300px;

などが必要です。

inline要素に margin:auto

効かないケースがあります。

a
span

などは注意です。

実際の現場では？

現在のWeb制作では、

Flexbox が最強クラスに使われます

ただし、

margin:auto

も今でも超重要です。

さらに、

position + transform

はモーダルで頻出します。

つまり、全部使います…！