HTML、CSS、XHTMLで「Center Align on a Absolutely Positioned Div」

2024-04-08

絶対配置されたdivを中央に配置する方法

margin: 0 auto; を使用する

これは、最も簡単な方法の一つです。以下のコードのように、div要素に position: absolute; と margin: 0 auto; を設定します。

<div style="position: absolute; margin: 0 auto;">
  中央に配置したいコンテンツ
</div>

Flexbox は、要素を柔軟に配置するためのレイアウトシステムです。以下のコードのように、親要素に display: flex; と justify-content: center; および align-items: center; を設定します。

<div style="display: flex; justify-content: center; align-items: center;">
  <div>
    中央に配置したいコンテンツ
  </div>
</div>

CSS Grid は、2次元レイアウトを作成するためのレイアウトシステムです。以下のコードのように、親要素に display: grid; と place-items: center; を設定します。

<div style="display: grid; place-items: center;">
  <div>
    中央に配置したいコンテンツ
  </div>
</div>

position: fixed; を使う

この方法は、画面全体に中央に配置したい場合に便利です。以下のコードのように、div要素に position: fixed; と top: 50%; および left: 50%; と transform: translate(-50%, -50%); を設定します。

<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  中央に配置したいコンテンツ
</div>

margin: 0 auto; は、最も簡単な方法ですが、IE8 以前ではサポートされていません。
flexbox は、モダンなブラウザで広くサポートされており、比較的簡単に中央に配置できます。
CSS Grid は、より複雑なレイアウトを作成する場合に便利です。
position: fixed; は、画面全体に中央に配置したい場合に便利です。

HTML

<div id="container">
  <div id="content">
    中央に配置したいコンテンツ
  </div>
</div>

CSS

#container {
  position: relative;
}

#content {
  position: absolute;
  /* 方法 1 */
  /* margin: 0 auto; */

  /* 方法 2 */
  /* display: flex;
  justify-content: center;
  align-items: center; */

  /* 方法 3 */
  /* display: grid;
  place-items: center; */

  /* 方法 4 */
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */

  width: 300px;
  height: 200px;
  background-color: #ccc;
}

方法 1

#content {
  margin: 0 auto;
}

#content {
  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  display: grid;
  place-items: center;
}

#content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

実行結果

上記

絶対配置されたdivを中央に配置する他の方法

text-align: center; を使う

これは、テキストコンテンツのみを中央に配置したい場合に便利です。以下のコードのように、div要素に text-align: center; を設定します。

<div style="position: absolute; text-align: center;">
  中央に配置したいテキスト
</div>

CSS transformを使用して、div要素を水平方向と垂直方向に中央に配置できます。以下のコードのように、div要素に position: absolute; と transform: translate(-50%, -50%); を設定します。

<div style="position: absolute; transform: translate(-50%, -50%);">
  中央に配置したいコンテンツ
</div>

calc() 関数を使用して、div要素の左右の余白を計算できます。以下のコードのように、div要素に position: absolute; と left: 50%; と margin-left: calc(-50% - 150px); を設定します。

<div style="position: absolute; left: 50%; margin-left: calc(-50% - 150px);">
  中央に配置したいコンテンツ
</div>

JavaScriptを使用して、div要素の座標を計算して中央に配置できます。

<div id="content">
  中央に配置したいコンテンツ
</div>

const content = document.getElementById("content");

const centerContent = () => {
  const contentWidth = content.offsetWidth;
  const contentHeight = content.offsetHeight;
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  content.style.left = `${(windowWidth - contentWidth) / 2}px`;
  content.style.top = `${(windowHeight - contentHeight) / 2}px`;
};

window.addEventListener("resize", centerContent);

centerContent();