positionを使用しているｐ要素を左揃えのままデバイスの中央に配置する方法

こんにちは。niinaです。

先日メインビジュアルの画像上に配置するコピーライトを、左揃えのまま中央に配置する方法がわからず苦悩していました…
問題になっていたのは、中央配置したいコピーライト部分のh2要素にposition指定をしていたため、margin: 0 auto;が効かないということでした。
解決策がわかったので備忘録として記録しておこうと思います。

positionを使うと要素が浮いたような状態になる

今回の場合は、メインビジュアルの最下部にコピーライトを置きたかったので、コピーライトの位置をpositionで指定することにしました。

html

<div class="mv">
  <h2 class="mv-copy">コピーライトです</h2>
</div>

css

.mv {
  position: relative;
}

.mv-copy {
  position: absolute;
  bottom: 0;
}

何も知らなかった私は安易に.mv-copyにmargin: 0 auto;すれば左揃えのまま、中央配置にできるもんだと思っていました。

が、実はpositionを使った場合、marginは効かなくなってしまうのです。
何故か？？
それはpositionを使うことで、その要素自体が浮いたような状態になってしまうからです。

positionとtransformで要素を移動させよう

それでは中央に配置するためにはどうすればいいのでしょうか。
そこで使うのがpositionとtransformです。
実際に見ていきましょう。

css

.mv-copy {
  position: absolute:
  bottom: 0;
  left: 50%; /*まずは要素を左に50%移動させる（要素の最左部がど真ん中にくる）*/
  transform: translateX(-50%); /*余分に左に移動してしまった要素の半分だけ右に戻す*/

これで完成です。