CSSで要素を中央揃えする7つの方法をまとめて解説、中央揃えをマスターしよう

1年 ago
綾乃, 一希
1 minute

CSSではエレメントを中央揃えにする方法はいくつかあります。以下に7つの一般的な方法をまとめました。

  1. 左右のマージンを「auto」に設定すれば、要素を水平中央に配置できます。例：margin: 0 auto;
  2. 親コンテナの中心に要素を位置づけるには、position を「absolute」に設定し、top: 50% と left: 50% を使って要素を位置づけます。さらに、水平垂直方向に中央配置するには、transform プロパティの translate(-50%, -50%) を使用します。例：

position: 絶対

上: 50%;

左: 50%;

transform: translate(-50%, -50%) を日本語のネイティブな表現に言い換えると:
transform: translate(-50%, -50%);

  1. 親要素のdisplayプロパティを”flex”に設定し、align-itemsとjustify-contentプロパティをそれぞれ”center”に設定すれば、子要素を水平垂直中央揃えすることができます。 例：

display: flex;

align-items: center;

コンテンツを中央に配置

  1. 親要素の「display」プロパティを「grid」に設定し、「place-items」プロパティを「center」にすることで、グリッドレイアウトを使用した水平方向や垂直方向のセンタリングができます。例：

gridに表示

中央揃え

  1. 絶対配置で水平垂直中央寄せをおこなうには、要素のpositionを”absolute”にして、top: 0、bottom: 0、left: 0、right: 0で親コンテナの四辺に配置します。例えば：

絶対位置

最も上位: 0

ボトム:0;

左: 0;

ネイティブに日本語で言い換えてください。1つのオプションでOKです。

マージン：オート;

  1. テーブルとテーブルセルを使用して水平と垂直に中央配置：親コンテナーのdisplayプロパティを「table」に設定し、内部要素のdisplayプロパティを「table-cell」に設定し、vertical-alignプロパティを「middle」に設定すると、要素を水平と垂直に中央配置できます。例：

table として表示する

幅: 100%;

高さ：100％

テキストを中央揃えにする

垂直方向に中央揃え

  1. テキストを左右中央揃えにするために、親要素のtext-alignプロパティを”center”に、子要素のdisplayプロパティを”inline-block”に設定する。例：

テキストを中央揃えにする。

display: inline-block;

要素を中央揃えにするための7つの一般的な手法があり、具体的なニーズに合わせて適切な手法を選択できます。

bannerAds