Zentrieren Sie ein absolutes Div mit CSS
- Elemente mit CSS zentrieren
-
Zentrieren Sie ein Element horizontal mit der Eigenschaft
absolut -
Zentrieren Sie ein Element vertikal mit der Eigenschaft
absolut -
Zentrieren Sie ein Element sowohl horizontal als auch vertikal mit der Eigenschaft
absolut - Abschluss
CSS (Cascading Style Sheets) wird verwendet, um Stile für HTML-Elemente zu definieren und wie sie angezeigt werden sollen, um sie an die verschiedenen Geräte und Bildschirmgrößen anzupassen. Die Verwendung von CSS spart viel Arbeit, da es das Layout mehrerer Seiten gleichzeitig steuern kann.
Mal sehen, wie es die Elemente innerhalb einer div-Klasse mit der absolute-Eigenschaft zentriert.
Elemente mit CSS zentrieren
Wenn wir einen Text, ein Bild, ein Feld oder eine Gruppe von Elementen zentrieren möchten, müssen wir sie vertikal und horizontal positionieren. Auch wenn die Zentrierung mit horizontaler und vertikaler Positionierung einfach zu sein scheint, sind die Schritte, die wir befolgen müssen, etwas knifflig.
Wir können text-align: center; mit inline und margin: 0 auto; mit Blockelementen, um Elemente horizontal zu zentrieren. Mit der Eigenschaft absolute in CSS können wir ein Element oder eine Gruppe von Elementen auch vertikal, horizontal oder vertikal und horizontal zentrieren.
Verwenden Sie die absolute Eigenschaft
Sofern wir keine Position angeben, an der Elemente existieren sollen, bleiben sie standardmäßig statisch. Die Eigenschaften top, left, right und bottom funktionieren damit nicht.
Die HTML-Elemente in static sind also nicht positioniert und erscheinen so, wie sie in der Auszeichnungssprache sind. Aber mit der Eigenschaft absolut werden Elemente positioniert und verhalten sich so, als wären sie nicht da.
Der Platz des absolut positionierten Elements wird ihm weggenommen und einem anderen zugewiesen, während das absolut positionierte Element allein Platz einnimmt.
Nehmen wir an, unser HTML-Code ist wie folgt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Center an Absolute div</title>
</head>
<body>
<div class="container">
<div class="green-box"></div>
<div class="blue-box"></div>
</div>
</body>
</html>
Wie im obigen Code-Snippet wurde erwähnt, dass der Dokumenttyp html ist, und am Anfang sowohl <html> als auch <head> geöffnet. Danach definiert es den Meta-Zeichensatz, der den Zugriff auf verschiedene Zeichen ermöglicht.
Dann wird die CSS-Datei mit dem Namen style mit der aktuellen HTML-Datei mittels href verknüpft und innerhalb des <title> ein Titel Center an Absolute div angezeigt. Als nächstes müssen wir den <body> einmal öffnen, nachdem wir den <head> geschlossen haben.
Im <body> wird eine div class namens container geöffnet und zwei weitere green-box und blue-box erstellt. Im letzten Teil sind die Tags <div>, <body> und <html> die Schlusssequenz.
style.css-Code:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
}
.orange-box,.purple-box {
width: 100px;
height: 100px;
}
.orange-box {
background-color: orange;
}
.purple-box {
background-color: purple;
}
Das obige Code-Snippet ist der Code innerhalb der style.css.
Zunächst haben wir einen grün umrandeten Container mit definierten Eigenschaften erstellt. Als nächstes bauten wir zwei Boxen in den Farben Orange und Lila mit 100px Breite und Höhe.
Ausgang:
Anpassen der Eigenschaften in den Kästchen in der Datei style.css, wir können sie horizontal, vertikal oder sowohl horizontal als auch vertikal zentrieren.
Um eine klare Vorstellung zu bekommen, passen wir nur das lila Kästchen an. Zum Zentrieren der Elemente können Sie den obigen Code für die unten genannten Anwendungsfälle ändern.
Zentrieren Sie ein Element horizontal mit der Eigenschaft absolut
Beispielcode:
.purple-box {
background-color: purple;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Ausgang:
Gemäß dem obigen Snippet haben wir das lila Kästchen mit der Eigenschaft absolute positioniert, während die Werte für left und right 0 sind. Auch die Ränder top und bottom sind 0, während beide links und rechts sind auto.
Daher nimmt es einen automatischen Rand für die Breite des Objekts.
Wie wir in der Ausgabe sehen können, wird das violette Kästchen mithilfe der Positionseigenschaft absolute horizontal zentriert.
Zentrieren Sie ein Element vertikal mit der Eigenschaft absolut
Beispielcode:
.purple-box {
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
Ausgang:
Mit obigem Code-Snippet haben wir das violette Kästchen mit der Eigenschaft absolute vertikal zentriert in die Position gesetzt und die Werte für top und bottom auf 0 gesetzt. Außerdem setzen wir den margin-Wert auto für oben und unten, während der Randwert 0 für links und rechts ist.
Nachdem wir das violette Kästchen wie im obigen Code angepasst haben, können wir es vertikal zentriert platzieren, indem wir die in der obigen Ausgabe gezeigte Eigenschaft absolute verwenden.
Zentrieren Sie ein Element sowohl horizontal als auch vertikal mit der Eigenschaft absolut
Beispielcode:
.purple-box {
background-color: purple;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
Ausgang:
Diese Methode ist eine Sammlung der oben genannten Methoden. Um das violette Kästchen horizontal und vertikal zu zentrieren, haben wir den Wert 0 für rechts, links, oben und unten gesetzt, nachdem wir die Position als absolut eingestellt haben.
Dann haben wir auto als Rand-Wert für oben, unten, links und rechts zugewiesen.
Indem wir die obige Methode anpassen, können wir das violette Kästchen vertikal und horizontal relativ zur Seite zentrieren. Aber hier verwenden wir einen Container.
Wenn wir das violette Kästchen passend zum grün umrandeten Container zentrieren wollen, müssen wir die relative Position innerhalb der Eigenschaften des Containers wie folgt definieren.
Beispielcode:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
position: relative;
}
Ausgang:
Die obigen drei Instanzen sind die drei wichtigsten Instanzen beim Zentrieren eines Elements, und wir haben die Breite für das violette Kästchen in jedem Beispiel definiert.
Abgesehen davon können wir, wenn die Breite unbekannt ist, die Methode transformieren mit relativen Skalen verwenden, und ihre Verwendung ist am besten, da sie reaktionsschnell und flexibel ist, anstatt einen Wert für die Breite anzugeben.
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
transform: translate(0, -50%);
Bei dieser Methode verläuft die linke Skala in der Funktion translate mit der x-Achse, während die andere Skala mit der y-Achse verläuft. Entsprechend der Skala ist das Element responsiv.
Abschluss
Mit der Eigenschaft absolute können wir die Größe der Blöcke ändern und entsprechend den Prozentsätzen reagieren. In diesem Artikel haben wir anhand eines Beispiels das horizontale, vertikale und horizontale und vertikale Zentrieren der Elemente besprochen.
Anstelle von statischen Elementen respektieren die absolut positionierten Elemente nicht den Container, in dem wir sie deklariert haben. Aber mit dem relativ positionierten Element hat das absolut positionierte Element eine Grenze mit den Eigenschaften Rand und oben, unten, links und rechts.
Die transform-Methode erhöht die Flexibilität und Reaktionsfähigkeit, wenn die Breite nicht definiert ist.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.