divの水平方向の中央配置を実装する

Question

divを画面の中央に配置したいと思っています。問題は、div が小さい場合、左から 45% で問題ないように見えますが、div が長い (つまり幅が広い) 場合は、左から 30% に変更する必要があることです。

サイズに基づいて div を中央に配置する賢い方法はありますか。

body {
背景:青;
}

。箱 {
位置: 絶対;
上:10ピクセル;
左:30%;
背景:白;
パディング:10ピクセル;
境界半径:10px;
}

<div class="box">
これは長い div であるため、左 = 30% が必要です
</div>

Answer 1

次の方法で水平方向の中央に配置できます:

リーリー

Answer 2

display: flex;プロパティを使用して、コンポーネントを中央に揃えることができます。

cssフレックス

リーリー リーリー