【WordPress】Position～absoluteで要素（ブロック）をセンタリングする方法

2024年7月12日

画像やテキストを重ね合わせることができる CSS （ Position～absolute ）はとても便利なCSSですが、要素（ブロック）の位置がクリアされてしまうため。センタリングする方法に迷うことがあります。

ポイント

本記事では、

Position～absolute でセンタリングする方法を解説します。

センタリングしちゃいましょう！

画像や文字を重ね合わせる方法はこちら

: 【WordPressで簡単】画像の上に画像や文字を重ねて表示する方法（オシャレなサイトに変身）

画像や文字を重ね合わせることで、スマートでスタイリッシュな表現ができ、読者に「かっこいい」と思ってもらえるページを作ることが可能です。HTML と CSS で実現する方法と、WordPress で応用する方法を紹介します。

続きを見る

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 Position～absolute でセンタリングする方法
- 1.1 サンプルコード
2 まとめ：Position～absoluteで要素（ブロック）をセンタリングする方法

Position～absolute でセンタリングする方法

Point.

センタリング
する方法

Position～absolute で要素（ブロック）をセンタリングする方法は簡単です。考え方を先に解説します。

最初に左から 50% の位置にセンタリングしたい要素（ブロック）を配置します。「left : 50%」をCSSで指定することで上記の配置になります。

さらに要素の%0%の幅だけ左に移動すると、ちょうどセンタリング位置に移動します。「transform : translateX(-50%)」をCSSで指定することで要素が左に50%移動します。

サンプルコード

Position～absolute でセンタリングするサンプルです。

これは中央に配置された要素です

X 方向にセンタリングするサンプル

<div class="myContainer">
  <div class="myCenteredElement">
    これは中央に配置された要素です
  </div>
</div>

<style>
  .myContainer {
    position: relative;
    width: 100%;
    height: 210px;
    border: 2px solid red;
  }

  .myCenteredElement {
    position: absolute;
    left : 50%;
    transform: translateX(-50%);
    border: 2px solid darkblue;
  }
</style>

Y 方向にセンタリングするサンプル

<div class="myContainer">
  <div class="myCenteredElement">
    これは中央に配置された要素です
  </div>
</div>

<style>
  .myContainer {
    position: relative;
    width: 100%;
    height: 210px;
    border: 2px solid red;
  }

  .myCenteredElement {
    position: absolute;
    top : 50%;
    transform: translateY(-50%);
    border: 2px solid darkblue;
  }
</style>

X / Y 方向にセンタリングするサンプル

<div class="myContainer">
  <div class="myCenteredElement">
    これは中央に配置された要素です
  </div>
</div>

<style>
  .myContainer {
    position: relative;
    width: 100%;
    height: 210px;
    border: 2px solid red;
  }

  .myCenteredElement {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    border: 2px solid darkblue;
  }
</style>