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

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

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

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

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>

まとめ：Position～absoluteで要素（ブロック）をセンタリングする方法

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

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

ブラウザの幅が変化してもちゃんとセンタリングしてくれる便利なコードです。