親要素のサイズに関わらず中央に配置！position: absolute要素の配置方法

position: absolute要素を中央に配置する方法

top: 50%; left: 50%; と transform: translate(-50%, -50%) を使う

この方法は、親要素の基準点から子要素を相対的に配置します。

HTML

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

CSS

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この方法の利点は、親要素の高さが分からなくても中央に配置できることです。

注意点

• 子要素の幅と高さが固定されている必要があります。
• 親要素に position: relative を設定する必要があります。

margin: 0 auto; を使う

この方法は、左右の余白を自動的に調整して中央に配置します。

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
}

この方法は、子要素の幅が固定されている場合に有効です。

• 子要素の高さが分からない場合は、中央に配置できません。

Flexboxは、要素を柔軟に配置するためのレイアウトシステムです。

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

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

• Flexboxは古いブラウザではサポートされていない場合があります。

CSS Gridは、2次元レイアウトを作成するためのレイアウトシステムです。

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

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

position: absolute要素を中央に配置するには、いくつかの方法があります。それぞれ異なる方法で中央揃えを実現します。

どの方法を使うかは、プロジェクトの要件やブラウザのサポート状況によって異なります。

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

/* 方法1 */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

/* 方法2 */
.parent2 {
  position: relative;
}

.child2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 auto;
  width: 100px;
}

/* 方法3 */
.parent3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child3 {
  width: 100px;
  height: 100px;
}

/* 方法4 */
.parent4 {
  display: grid;
  place-items: center;
}

.child4 {
  width: 100px;
  height: 100px;
}

実行結果

各方法の詳細

方法1

top: 50%; left: 50%; と transform: translate(-50%, -50%) を使って、子要素を親要素の基準点から相対的に中央に配置します。

方法2

margin: 0 auto; を使って、子要素の左右の余白を自動的に調整して中央に配置します。

方法3

Flexboxを使って、子要素を親要素の中央に配置します。

方法4

calc()を使うと、親要素のサイズに基づいて子要素の位置を計算することができます。

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

/* 親要素の高さが分かっている場合 */
.child {
  top: calc(50% - 50px);
}

/* 親要素の幅と高さが分かっている場合 */
.child {
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

JavaScriptを使って、子要素の位置を動的に調整することができます。

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

JavaScript

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

const centerChild = () => {
  const parentWidth = parent.offsetWidth;
  const parentHeight = parent.offsetHeight;
  const childWidth = child.offsetWidth;
  const childHeight = child.offsetHeight;

  child.style.top = `${(parentHeight - childHeight) / 2}px`;
  child.style.left = `${(parentWidth - childWidth) / 2}px`;
};

window.addEventListener('resize', centerChild);
centerChild();

CSSライブラリを使う

<div class="parent">
  <div class="child">中央に配置したい要素</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  .center();
}

position: absolute要素を中央に配置するには、さまざまな方法があります。どの方法を使うかは、プロジェクトの要件やブラウザのサポート状況によって異なります。