【CSS】親要素を超えて画面幅いっぱいまで子要素を表示する方法

概要

子要素にmarginを指定することで画面幅最大で表示ができる

前提

親要素がmargin: 0 auto;などで画面中央寄せとなっていること
※親要素の中央を起点としてmarginを取るため、子要素の表示が範囲がおかしくなる(子要素のmarginをいじってみるとわかる)

サンプルコード

<div class="parent">
  <div class="child"></div>
</div>

<style>
.parent {
  border: 1px dotted blue;
  height: 300px;
  margin: 0 auto; /* 前提 */
  width: 1000px;
}

.child {
  border: 1px solid red;
  height: 300px;
  margin: 0 calc(50% - 50vw); /* 画面幅いっぱいに表示 */
}
</style>