Heim  >  Fragen und Antworten  >  Hauptteil

Implementieren Sie die horizontale Mittelpositionierung von Div

<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>
P粉573809727P粉573809727431 Tage vor460

Antworte allen(2)Ich werde antworten

  • P粉659518294

    P粉6595182942023-09-06 11:48:07

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

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

    Antwort
    0
  • P粉752290033

    P粉7522900332023-09-06 09:49:47

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

    Antwort
    0
  • StornierenAntwort