Implementieren Sie die horizontale Mittelpositionierung von Div

Question

Ich möchte ein Div in der Mitte des Bildschirms positionieren. Das Problem besteht darin, dass bei einem kleinen Div 45 % von links gut aussehen, aber wenn das Div länger (d. h. breiter) ist, muss ich es auf 30 % von links ändern.

Gibt es eine clevere Möglichkeit, ein Div basierend auf seiner Größe in der Mitte zu positionieren?

body {
Hintergrund:blau;
}

.Kasten {
Position: absolut;
oben:10px;
links:30 %;
Hintergrund:weiß;
Polsterung:10px;
Randradius:10px;
}

<div class="box">
Dies ist ein langer Div, daher sind left = 30 % erforderlich
</div>

Answer 1

你可以通过以下方式将其水平居中：

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

Answer 2

您可以使用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>