Implémenter le positionnement central horizontal de div

Question

Je souhaite positionner un div au centre de l'écran. Le problème est que lorsque le div est petit, 45 % à partir de la gauche semble correct, mais lorsque le div est plus long (c'est-à-dire plus large en largeur), je dois le changer à 30 % à partir de la gauche.

Existe-t-il un moyen intelligent de positionner un div au centre en fonction de sa taille.

body {
arrière-plan : bleu ;
}

.boîte {
position : absolue ;
haut : 10 px ;
gauche : 30 % ;
fond : blanc ;
remplissage : 10 px ;
rayon de bordure : 10 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="box">
Il s'agit d'un long div, donc gauche = 30 % est nécessaire
</div>

Answer 1

Vous pouvez le centrer horizontalement en :

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

Answer 2

Vous pouvez centrer un composant à l'aide de la propriété display: flex;.

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>