JavaScript, CSS, HTMLで画面中央にdiv要素を配置する

HTMLで要素を作成し、CSSでスタイルを設定し、JavaScriptで動的な調整を行うことで、div要素を画面中央に配置することができます。

HTMLの要素を作成

<div id="centered-div">This is a centered div.</div>

CSSでスタイルを設定

#centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• position: absolute;: 要素を絶対的な位置付けにします。
• top: 50%;: 要素の上端をウィンドウの高さの50%の位置に設定します。
• transform: translate(-50%, -50%);: 要素を自身のサイズに対して50%ずつ上下左右に移動させ、中央に配置します。

JavaScriptで動的な調整 (必要に応じて)

const centeredDiv = document.getElementById('centered-div');

// ウィンドウのサイズが変更されたときに中央に配置し直す
window.addEventListener('resize', () => {
  centeredDiv.style.left = `${window.innerWidth / 2}px`;
  centeredDiv.style.top = `${window.innerHeight / 2}px`;
});

このコードでは、JavaScriptを使用してウィンドウのサイズが変更されたときに、div要素のleftとtopプロパティを更新し、常に中央に配置されるようにします。

注意:

• **position: absolute;**を使用すると、要素は通常の流れから外れるため、他の要素に影響を与える可能性があります。
• flexboxやgridレイアウトを使用することも、div要素を中央に配置する効果的な方法です。

日本語でのコード解説

div要素中央配置方法

<div id="centered-div">This is a centered div.</div>

#centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

const centeredDiv = document.getElementById('centered-div');

// ウィンドウのサイズが変更されたときに中央に配置し直す
window.addEventListener('resize', () => {
  centeredDiv.style.left = `${window.innerWidth / 2}px`;
  centeredDiv.style.top = `${window.innerHeight / 2}px`;
});

flexboxを使用する

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

#centered-div {
  /* 必要なスタイル */
}

• display: flex;: 親要素をフレックスボックスレイアウトにします。
• justify-content: center;: 子要素を水平方向に中央揃えします。
• align-items: center;: 子要素を垂直方向に中央揃えします。

gridを使用する

.container {
  display: grid;
  place-items: center;
}

#centered-div {
  /* 必要なスタイル */
}

• display: grid;: 親要素をグリッドレイアウトにします。

tableを使用する

<table>
  <tr>
    <td>
      <div id="centered-div">This is a centered div.</div>
    </td>
  </tr>
</table>

table {
  width: 100%;
  height: 100%;
}

td {
  text-align: center;
  vertical-align: middle;
}

• width: 100%;とheight: 100%;: テーブルをウィンドウのサイズに合わせます。
• text-align: center;とvertical-align: middle;: セル内のコンテンツを水平方向と垂直方向に中央揃えします。