Wie zentriere ich HTML-Elemente durch absolute Positionierung und feste Positionierung von CSS?

Viele Leute versuchen, Elemente wie Modalboxen über CSS in der Mitte der Seite zu zentrieren, scheitern aber und machen es dann mit JS. In diesem technischen Artikel zeige ich Ihnen, wie Sie ein Element ohne Verwendung von JavaScript zentrieren. Kommen wir ohne weitere Umschweife direkt zum Text.

Die Methode ist relativ einfach, das heißt, anstatt nur ein Umhüllungselement zu verwenden, verwenden Sie zwei Elemente. (Empfohlener Kurs: CSS-Video-Tutorial)

HTML:

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

CSS:

.popup{
   position:fixed;
 left:50%;  
}

Dieses CSS zentriert die linke Seite des Elements in der Mitte des Fensters, aber wir möchten, dass die modale Box basierend auf der mittleren Position des Elements zentriert wird.

Jetzt schauen wir uns den Trick an: Da wir zwei Wrapper für das Popup haben, können wir das innere Div manipulieren und dem Div sagen, dass es sich um -50 % relativ nach links bewegen soll, und weil es sich innerhalb des Containers befindet, wird das Div nur Verschieben Sie die Hälfte ihrer Größe nach links. So bringen wir das Modale zusammen.

CSS hinzufügen

.popup .wrapper{
  position:relative; 
  left:-50%;
}

Dann wird unser Element in der horizontalen Mitte platziert und so die Zentrierung des Elements erreicht.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in der Spalte Video-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie zentriere ich HTML-Elemente durch absolute Positionierung und feste Positionierung von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!