<p>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. </p> <p>Gibt es eine clevere Möglichkeit, ein Div basierend auf seiner Größe in der Mitte zu positionieren? </p> <p> <pre class="brush:css;toolbar:false;">body { Hintergrund:blau; } .Kasten { Position: absolut; oben:10px; links:30 %; Hintergrund:weiß; Polsterung:10px; Randradius:10px; }</pre> <pre class="brush:html;toolbar:false;"><div class="box"> Dies ist ein langer Div, daher sind left = 30 % erforderlich </div></pre> </p>

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

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>