【UIUXデザイン】よく使用するCSS Tips📝

CSSで要素を中央配置する📝

CSSで要素を中央配置する方法はいくつかあります。主な方法を以下にまとめます。

1. Flexboxを使用

.parent {
  display: flex;
  justify-content: center; /* 水平中央 */
  align-items: center; /* 垂直中央 */
  height: 100vh; /* 親要素の高さを設定（必要に応じて） */
}

• 適用対象: ブロック要素やインライン要素。
• メリット: シンプルで柔軟、レスポンシブデザインにも対応。
• 注意: 親要素にdisplay: flexを設定。

2. Gridを使用

.parent {
  display: grid;
  place-items: center; /* 水平・垂直中央を一括指定 */
  height: 100vh;
}

• 適用対象: ブロック要素やインライン要素。
• メリット: コードが短く、直感的。
• 注意: 親要素にdisplay: gridを設定。

3. margin: auto（ブロック要素の水平中央）

.element {
  margin: 0 auto;
  width: 固定値; /* 幅を指定する必要あり */
}

• 適用対象: ブロック要素（divなど）。
• メリット: 古いブラウザでも対応。
• 注意: 垂直中央には使えない。幅の指定が必要。

4. position: absoluteとtransform

.parent {
  position: relative;
  height: 100vh;
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• 適用対象: 絶対位置指定が可能な要素。
• メリット: 要素のサイズに依存せず中央配置可能。
• 注意: 親要素にposition: relativeが必要。

5. text-align（インラインまたはインラインブロック要素の水平中央）

.parent {
  text-align: center;
}
.element {
  display: inline-block; /* または inline */
}

• 適用対象: インライン要素やdisplay: inline-blockの要素。
• メリット: シンプルでテキストや画像に有効。
• 注意: 垂直中央には使えない。

選び方のポイント

• モダンなレイアウト: FlexboxやGridが推奨（コードがシンプルで柔軟）。
• 古いブラウザ対応: margin: autoやtext-align。
• 絶対位置指定が必要な場合: position: absoluteとtransform。