cssで中央揃えする備忘録

margin使う例

<div class="hoge"> 
    <div class="hage">
    </div> 
</div>
.hoge { width: 100%; }
.hage { margin-right: auto; margin-left: auto; }

一番簡単（なはず）。

text-align使う例

<div class="hoge">
    <div class="hage">
    </div>
</div>
.hoge { text-align: center; }
.hage { display: inline-block: }

よくやるっちゃやる

display:flex 使う例

<div class="hoge">
    <div class="hage">
    </div>
</div>
.hoge{ display: flex; justify-content: center; align-items: center; }
.hage{ display: inline-grid; }

結局これが一番いい（迷ったときのflex）