Laksanakan kedudukan tengah mendatar div

Question

Saya mahu meletakkan div di tengah-tengah skrin. Masalahnya ialah apabila div kecil, 45% dari kiri kelihatan baik, tetapi apabila div lebih panjang (iaitu lebih lebar dalam lebar), saya perlu menukarnya kepada 30% dari kiri.

Adakah terdapat cara pintar untuk meletakkan div di tengah berdasarkan saiznya.

body {
latar belakang:biru;
}

.kotak {
jawatan: mutlak;
atas:10px;
kiri: 30%;
latar belakang:putih;
padding:10px;
jejari sempadan:10px;
}

<div class="box">
Ini adalah div yang panjang, jadi kiri = 30% diperlukan
</div>

Answer 1

Anda boleh memusatkannya secara mendatar dengan:

.box  {
   position: absolute;
   top:10px;
   left:50%;
   background:white;
   padding:10px;
   border-radius:10px;
   transform: translateX(-50%);
}

Answer 2

Anda boleh menjajarkan bahagian tengah komponen menggunakan display: flex;property.

css flex

body {
flex: 1;
background:blue;
display: flex;
justify-content: center;
}

.box  {
position: absolute;
top:10px;
background:white;
padding:10px;
border-radius:10px;
}

<div class="box">
这是一个很长的div，所以需要左边=30％
</div>