CSSで絶対配置された要素をdivの中央に配置する方法

2024-04-02

CSSで絶対配置された要素をdivの中央に配置する方法

margin: auto; を使用する

これは最も簡単な方法です。子要素に position: absolute; と margin: auto; を設定します。

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.child {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: auto;
}

この方法は、左右方向に中央揃えしたい場合に有効です。

flexbox を使用すると、要素をより柔軟に配置することができます。親要素に display: flex; と justify-content: center; align-items: center; を設定します。

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

transform を使用すると、要素を回転したり、拡大縮小したりすることができます。子要素に position: absolute; と top: 50%; left: 50%; transform: translate(-50%, -50%); を設定します。

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

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

position: fixed; を使用する

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

これらの方法のどれを使用するかは、状況によって異なります。それぞれの方法の特徴を理解して、最適な方法を選択してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSで絶対配置された要素をdivの中央に配置する</title>
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }

    .child {
      /* 方法 1 */
      /* position: absolute; */
      /* margin: auto; */

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

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

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

      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

各方法の解説

方法 2: flexbox を使用する

方法 3: transform を使用する

方法 4: position: fixed; を使用する

実行方法

上記のコードをHTMLファイルに保存し、ブラウザで開きます。

注意点

position: absolute; を使用する場合、親要素の position が relative または absolute に設定されている必要があります。
flexbox を使用する場合、親要素に display: flex; を設定する必要があります。
transform を使用する場合、親要素の position が static 以外に設定されている必要があります。
position: fixed; を使用する場合、スクロールしても要素が中央に表示されます。

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

display: table; と display: table-cell; を使用する

親要素に display: table; と text-align: center; を設定し、子要素に display: table-cell; を設定します。

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: table;
  text-align: center;
}

.child {
  display: table-cell;
  width: 100px;
  height: 100px;
  background: red;
}

CSS Grid を使用する

親要素に display: grid; と place-items: center; を設定します。

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

.child {
  width: 100px;
  height: 100px;
  background: red;
}

margin-left: 50%; を使用する

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.child {
  position: absolute;
  margin-left: 50%;
  width: 100px;
  height: 100px;
  background: red;
}