あまり知られていない（と思う）CSS中央寄せテクニック

CSS中央寄せテクニックとして、

position: absolute;
left: 0;
right: 0;
margin: auto;

はあまりにも有名だが、
親要素より大きな要素を中央寄せしようとすると左寄せになってしまう問題がある。

この問題を解消するためのCSSの書き方が以下になります。

css

position: absolute;
left: -100%;
right: -100%;
margin: auto;

※`left` `right` は必ずしも `-100%` でなくてもよい。 厳密には親要素からはみ出した数値の半分を`left` `right` にマイナス値で設定する。 上記の場合だと、

親：400px - 子：600px = -200px
-200px / 2 = -100px
left: -100px; right: -100px

こんなときに使える

コンテナー内にあるセクション要素の背景が、コンテナーを突き抜けてるようなデザインだった場合、いちいちコンテナー内からセクション要素を外に出す必要がなくなる。

css

section2 {  
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    left: -100%;
    right: -100%;
    margin: auto;
    width: 100vw;
    height: 100%;
    background: url(bg.jpg);
  }
}