## 万能 親要素に`display: flex`と方向の整列要素に`center`を指定する。 - `align-items`: 縦方向 - `justify-content`: 横方向 ```html <div style="display: flex; align-items: center; justify-content: center" class="grey-box px200"> <div>ほげほげ</div> </div> ``` ↓center <div style="display: flex; align-items: center; justify-content: center" class="grey-box px200"> <div>ほげほげ</div> <div>ほげほげ</div> </div> ## モダン https://zenn.dev/moneyforward/articles/css-grid-centering [[IE]]でなければ対応可能。 ```html <div class="grey-box px200" style="display: grid; place-content: center"> <div>ほげほげ</div> </div> ``` <div class="grey-box px200" style="display: grid; place-content: center"> <div>ほげほげ</div> </div> ### 子要素に指定する場合 左右中央の場合。 https://coliss.com/articles/build-websites/operation/css/centering-side-aligned-using-modern-css.html ```html <div class="grey-box px200"> <div style="max-inline-size: max-content; margin-inline: auto;">ほげほげ</div> </div> ``` <div class="grey-box px200"> <div style="max-inline-size: max-content; margin-inline: auto;">ほげほげ</div> </div>