CSSで中央配置したいときの４パターン
元となるHTMLは以下と置く
<div class="container">
<div class="box"></div>
</div>
1:flexを使用するパターン
.container{display:flex;align-items:center;justify-content:center;}２：absoluteを使用するパターン
.container{position:relative;}.box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}3:absoluteとmarginの合わせ技
.container{position:relative;}.box{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}4:gridを使用するパターン
.container{display:grid;place-item:center;}以上４パターン
困った時に参照する