問題5: 中央配置の失敗

問題

position: absoluteとtransformで中央配置しようとしたが、要素が画面外にはみ出してしまいます。

HTML

<div class="container">
  <div class="modal">
    <h2>モーダルタイトル</h2>
    <p>モーダルの内容がここに入ります。</p>
    <button>閉じる</button>
  </div>
</div>

CSS

.container {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  /* transformなし - 問題の原因 */
  width: 300px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

実行結果

モーダルタイトル

モーダルの内容がここに入ります。

※ モーダルの左上が中央に来てしまい、全体が右下にずれています

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの /* transformなし - 問題の原因 */ の部分に transform: translate(-50%, -50%); を追加してみましょう。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

top: 50%; left: 50%;は要素の左上の角を親要素の中央に配置します。

要素の中心を中央に配置するには、要素を自身のサイズの半分だけ戻す必要があります。

transform: translate()を使うと、要素自身のサイズを基準に移動できます。

解答

クリックして解答を表示

問題の原因

top: 50%; left: 50%;は要素の左上角を親要素の中央に配置するため、要素全体としては中央からずれてしまいます。

配置の仕組み

  • top: 50%：親要素の高さの50%の位置に要素の上端を配置
  • left: 50%：親要素の幅の50%の位置に要素の左端を配置
  • 結果：要素の左上角が中央に来る（要素全体は右下にずれる）

修正方法

方法1: transformを使った中央配置（推奨）

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 追加：自身の幅高さの50%分戻す */
  width: 300px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
修正後の結果

モーダルタイトル

モーダルの内容がここに入ります。

方法2: marginを使った中央配置（固定サイズの場合）

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;  /* 高さを固定 */
  margin-top: -100px;   /* 高さの半分 */
  margin-left: -150px;  /* 幅の半分 */
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
}

方法3: Flexboxを使った中央配置（モダンな方法）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  /* position: absolute; 不要 */
  /* top, left, transform 不要 */
  width: 300px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

中央配置の方法まとめ

/* 1. Position + Transform（最も汎用的） */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 2. Flexbox（親要素に適用） */
.center-flex-parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. Grid（親要素に適用） */
.center-grid-parent {
  display: grid;
  place-items: center;
}

/* 4. Margin auto（幅高さ固定時） */
.center-margin {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 200px;
  margin: auto;
}

/* 5. テキストの中央配置 */
.center-text {
  text-align: center;
  line-height: 100px;  /* 高さと同じ値 */
}

各方法の使い分け

方法 メリット デメリット 使用場面
Position + Transform サイズ可変対応 古いブラウザで問題 モーダル、ポップアップ
Flexbox 簡潔、レスポンシブ IE11で接頭辞必要 カード、コンテナ内配置
Grid 最も簡潔 IE非対応 モダンなレイアウト
Margin auto 古いブラウザ対応 サイズ固定必須 レガシー環境

覚えておくポイント

  • transform: translate(-50%, -50%)で完璧な中央配置
  • transformのパーセンテージは要素自身のサイズが基準
  • モダンプロジェクトではFlexboxやGridが推奨
  • ビューポート中央ならposition: fixedを使用
  • レスポンシブ対応にはtransformかFlexboxが最適