JSとCSSで中央寄せがなぜかズレる

JavaScript

Posted at 2025-02-24

#はじめに
JSを使用して要素の中央揃えを作成した時、なぜかCSSのフレックスボックスと中心がずれる場合があるので調べてみました

検証用コード

要素を3つ用意し
1.CSSのフレックスボックスを使用して中央揃えしたもの
2.JSの window.outerWidth を使用し計算を行い中央揃えしたもの
3.JSの window.innerWidth を使用し計算を行い中央揃えしたもの

を作成しどういった場合に中央揃えがずれるのかを検証してみます

<style>

  .frame{
    /* height: 10000px; */
  }

  .flex{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box{
    width: 100px;
    height: 100px;
    color: white;
  }

  #box1{
    background-color: rgb(255, 116, 116);
  }

  #box2{
    background-color: rgb(126, 160, 253);
    position: absolute;
    top: 100px;
  }

  #box3{
    background-color: rgb(123, 255, 128);
    position: absolute;
    top: 200px;
  }

</style>

<div class="frame">
  <div class="flex">
    <div id="box1" class="box">
      フレックスボックスによる中央寄せ
    </div>
  </div>

  <div class = "inner_frame">
    <div id="box2" class="box">
      outerWidthによる中央寄せ
    </div>
  </div>

  <div class = "inner_frame">
    <div id="box3" class="box">
      inner_widthによる中央寄せ
    </div>
  </div>
</div>

<script>
  const outer_width = window.outerWidth
  const box2 = document.getElementById('box2')
  box2.style.left =  `${(outer_width - box2.clientWidth) / 2}px`;

  const inner_width = window.innerWidth
  const box3 = document.getElementById('box3')
  box3.style.left =  `${(inner_width - box3.clientWidth) / 2}px`;

</script>