CSS中央寄せテクニックとして、
position: absolute;
left: 0;
right: 0;
margin: auto;
はあまりにも有名だが、
親要素より大きな要素を中央寄せしようとすると左寄せになってしまう問題がある。
この問題を解消するためのCSSの書き方が以下になります。
css
position: absolute;
left: -100%;
right: -100%;
margin: auto;
※leftrightは必ずしも -100%でなくてもよい。
厳密には親要素からはみ出した数値の半分をleftrightにマイナス値で設定する。
上記の場合だと、
親：400px - 子：600px = -200px-200px / 2 = -100pxleft: -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);
}
}