So zentrieren Sie ein DIV mit CSS [5 schnelle Methoden]

Wenn Sie jemals mit Ihren Programmierkenntnissen begonnen haben, Projekte zu erstellen, standen Sie wahrscheinlich vor der Herausforderung, Elemente auf einer Seite zu zentrieren. Die Frage „Wie zentriere ich ein Div?“ ist etwas, dem fast jeder Webentwickler begegnet.

In diesem Blog werden einfache Möglichkeiten zum Zentrieren von Elementen mithilfe von CSS untersucht. Von einfachen Methoden bis hin zu modernen Techniken behandeln wir die horizontale und vertikale Zentrierung von Elementen. Jede Methode wird anhand einfacher Beispiele erklärt, sodass Sie genau sehen können, wie sie funktioniert.

Ganz gleich, ob Sie mit CSS noch nicht vertraut sind oder eine kurze Auffrischung benötigen: Dieser Leitfaden hilft Ihnen dabei, die Kunst der Zentrierung von Elementen auf Ihren Webseiten zu erlernen. Fangen wir an!

Was ist DIV und warum sollte man überhaupt darüber nachdenken, ein DIV zu zentrieren?

Ein div oder eine Division ist ein grundlegendes HTML-Element, das als Container zum Gruppieren anderer Elemente auf einer Webseite fungiert.

Stellen Sie es sich einfach wie eine Box vor, die Sie zum Organisieren von Inhalten wie Text, Bildern oder anderen Elementen verwenden können. Divs sind für die Strukturierung und Gestaltung von Inhalten auf Ihren Webseiten unerlässlich, um diese besser zu organisieren und optisch ansprechender zu gestalten.

Warum überhaupt darüber nachdenken, ein Div zu zentrieren?

Das Zentrieren eines Div ist aus Sicht der Benutzererfahrung sehr wichtig. Für Webentwickler kann es jedoch eine Styling-Herausforderung darstellen, da es das Aussehen und Layout einer Webseite erheblich verbessern kann.

Deshalb ist Zentrierung wichtig:

• Verbesserte Lesbarkeit und Ästhetik: Durch die Zentrierung von Inhalten können diese optisch ansprechender gestaltet werden und es Benutzern leichter fallen, sich auf wichtige Elemente wie Schaltflächen, Formulare oder Bilder zu konzentrieren.
• Responsive Design: Wenn sich Ihr Layout an unterschiedliche Bildschirmgrößen anpasst, trägt die Zentrierung dazu bei, dass Ihre Inhalte ausgewogen bleiben und auf allen Geräten, vom Desktop bis zum Smartphone, gut aussehen.
• Hervorheben von Schlüsselelementen: Die Zentrierung ist eine großartige Möglichkeit, die Aufmerksamkeit auf wichtige Abschnitte oder Handlungsaufforderungen zu lenken, wie z. B. eine „Anmelden“-Schaltfläche oder ein Feature-Bild.
• Sauberere, professionellere Layouts: Ein zentriertes Layout sieht oft sauberer und ausgefeilter aus und verleiht Ihrer Website ein professionelleres Aussehen.

So zentrieren Sie ein DIV mithilfe von CSS (verschiedene Methoden)

Das Zentrieren eines Div kann auf verschiedene Arten erfolgen, je nachdem, ob Sie es horizontal, vertikal oder beides zentrieren möchten. Hier sind einige einfache Methoden:

Hier sind einige der beliebtesten Methoden zum Zentrieren eines Div mithilfe von CSS:

Methode 1: So zentrieren Sie ein Div mit automatischen Rändern

Wenn Sie neu im Webdesign sind, mag das Zentrieren von Elementen auf einer Webseite schwierig erscheinen, aber es ist ziemlich einfach, wenn Sie erst einmal den Dreh raus haben. Eine klassische und einfache Methode, ein div horizontal zu zentrieren, ist die Verwendung von automatischen Rändern. Lassen Sie es uns Schritt für Schritt aufschlüsseln.

1. Was Sie wissen müssen

Gehen Sie folgendermaßen vor, um ein div mit automatischen Rändern horizontal zu zentrieren:

• 1. Beschränken Sie die Breite: Stellen Sie zunächst sicher, dass Ihr div nicht die gesamte Breite seines Containers einnimmt. Standardmäßig werden div s so erweitert, dass sie die gesamte Breite ausfüllen. Um es zu zentrieren, müssen Sie eine maximale Breite festlegen.

• 2. Automatische Ränder verwenden: Durch automatische Ränder auf der linken und rechten Seite wird das div in die Mitte verschoben.

Hier ist ein einfaches Beispiel:

html

<div class="centered-div">This is a centered div</div>

CSS

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. Warum max-width: fit-content; ?

Die max-width: fit-content; Die Regel stellt sicher, dass das div nur so viel Breite einnimmt, wie es basierend auf seinem Inhalt benötigt. Wenn Sie eine feste Breite wie 200px verwendet haben, könnte das div überlaufen, wenn der Container zu schmal ist. fit-content passt die div Größe dynamisch an den Inhalt an.

3. Wie funktionieren automatische Margen?

Automatische Ränder wirken wie hungrige Flusspferde und verschlingen auf beiden Seiten gleichermaßen zusätzlichen Platz, um das Div zu zentrieren. Diese Methode passt sich automatisch an verschiedene Sprachen an und eignet sich perfekt zum Zentrieren einzelner Elemente, ohne andere zu beeinträchtigen.

Wenn beide Ränder auf auto eingestellt sind, teilen sie sich den zusätzlichen Platz gleichmäßig, wodurch das div zentriert wird.

4. Verwenden einer modernen Verknüpfung: margin-inline

Anstatt margin-left und margin-right separat festzulegen, können Sie für einen saubereren Ansatz die Eigenschaft margin-inline verwenden:

.centered-div {

max-width: fit-content;

margin-inline: auto; /* Setzt sowohl den linken als auch den rechten Rand automatisch auf „Auto“ */

}

Methode 2: So zentrieren Sie ein DIV mit Flexbox

Flexbox erleichtert die Zentrierung von Gegenständen in beide Richtungen. So können Sie mit Flexbox ein einzelnes Element zentrieren:

.container {

Anzeige: Flex;

rechtfertigen-Inhalt: Mitte; /* Horizontal zentriert */

align-items: center; /* Zentriert vertikal */

}

In diesem Beispiel ist .container auf die Verwendung von Flexbox eingestellt. Die Eigenschaft justify-content: center zentriert das Element horizontal, während align-items: center es vertikal zentriert.

Einige wichtige Punkte, die Sie berücksichtigen sollten:

Horizontale und vertikale Zentrierung: Flexbox erleichtert die horizontale und vertikale Zentrierung von Gegenständen, selbst wenn diese über den Behälter hinauslaufen.

Mehrere Artikel : Flexbox verarbeitet auch mehrere Artikel gut. Sie können flex-direction: row verwenden, um Elemente in einer Zeile zu stapeln, oder flex-direction : Column“ für einen vertikalen Stapel. Durch das Hinzufügen einer gap kann der Abstand zwischen Elementen angepasst werden.

Diese Methode ist sehr flexibel und wird häufig zum Zentrieren von Elementen in verschiedenen Layouts verwendet.

Methode 3: So zentrieren Sie DIV im Ansichtsfenster

Wenn Sie ein Element wie ein Popup oder ein Banner in der Mitte des Bildschirms (Ansichtsfenster) zentrieren möchten, können Sie die CSS-Positionierung verwenden. Hier ist eine einfache Möglichkeit:

1. Grundlegende Zentrierung mit fester Position

Um ein Element sowohl horizontal als auch vertikal zu zentrieren, führen Sie die folgenden Schritte aus:

• Position auf „Fest“ setzen:

– position: fixed; sorgt dafür, dass das Element beim Scrollen an Ort und Stelle bleibt. Es ist, als würde man das Element auf den Bildschirm kleben.

• Verwenden Sie den Einschub zum Verankern:

– inset: 0px; ist eine Abkürzung zum Festlegen des Abstands des Elements von den Rändern des Ansichtsfensters (oben, rechts, unten, links) auf 0 Pixel. Dadurch wird das Element gestreckt, um den gesamten Bildschirm auszufüllen.

• Größe einschränken :

– Legen Sie width und height fest, um die Größe des Elements zu definieren.

– Verwenden Sie max-width und max-height um sicherzustellen, dass es auf kleineren Bildschirmen nicht überläuft.

• Mitte mit automatischen Rändern : – margin: auto; zentriert das Element. Es teilt den zusätzlichen Raum um ihn herum gleichmäßig auf und sorgt dafür, dass er zentriert bleibt.

Beispielcode:

.element {

Position: fest;

Einschub: 0; /* Verankert das Element an allen Kanten */

Breite: 12rem; /* Legt eine feste Breite fest */

Höhe: 5rem; /* Legt eine feste Höhe fest */

maximale Breite: 100 vw; /* Stellt sicher, dass die Breite des Ansichtsfensters nicht überschritten wird */

maximale Höhe: 100dvh; /* Stellt sicher, dass die Höhe des Ansichtsfensters nicht überschritten wird */

Rand: automatisch; /* Zentriert das Element */

}

2. Nur horizontal zentrieren

Wenn Sie ein Element nur horizontal zentrieren möchten (z. B. ein Cookie-Banner unten), gehen Sie wie folgt vor:

• Position behoben:

– position: fixed; hält das Element an Ort und Stelle.

• An Kanten verankern:

– left: 0; und right: 0; um es horizontal von einer Seite zur anderen zu strecken.

– bottom: 8px; um es von der Unterkante aus zu positionieren.

• Beschränken und zentrieren:

– Legen Sie eine feste Breite fest.

– Verwenden Sie margin-inline: auto; um es horizontal zu zentrieren.

Beispielcode:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. Zentrierelemente mit unbekannten Größen

Wenn Sie die Größe des Elements nicht kennen, es aber dennoch zentriert haben möchten:

• Fit-Content verwenden:

– width: fit-content; und height: fit-content; Lassen Sie zu, dass das Element um seinen Inhalt herum schrumpft.

• Zentrierung anwenden:

– Kombinieren mit position: fixed; und margin: auto; um es zu zentrieren.

Beispielcode:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

Mit diesen Methoden können Sie Elemente unabhängig von ihrer Größe problemlos im Ansichtsfenster zentrieren.

Methode 4: So zentrieren Sie ein DIV mit CSS Grid

CSS Grid ist ein leistungsstarkes Tool für die Layoutgestaltung und eignet sich besonders zum Zentrieren von Elementen. So können Sie mit CSS Grid ganz einfach etwas sowohl horizontal als auch vertikal zentrieren:

1. Zentrieren eines einzelnen Elements

Um ein Element innerhalb seines Containers zu zentrieren, können Sie eine einfache Einrichtung mit CSS Grid verwenden:

• Rasteranzeige einrichten:

– display: grid; verwandelt den Behälter in ein Gitter.

• Place-Content verwenden:

– place-content: center; ist eine Verknüpfung, die den Inhalt sowohl horizontal als auch vertikal zentriert. Es setzt sowohl justify-content (horizontal) als auch align-content (vertikal) auf center .

Beispielcode:

css

.container {

Anzeige: Raster;

Ortsinhalt: Mitte; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */

}

Dadurch sitzt das Element unabhängig von seiner Größe genau in der Mitte seines Behälters.

2. Unterschiede zu Flexbox

Während CSS Grid Elemente zentrieren kann, verhält es sich anders als Flexbox:

– Flexbox: Zentriert Elemente basierend auf ihrer Größe und Behältergröße.

– CSS-Raster: Zentriert Elemente basierend auf der Größe der Rasterzelle, was schwierig sein kann, wenn die Rasterzellengröße nicht definiert ist.

Beispielcode im Raster mit Prozentsätzen:

css

.container {

Anzeige: Raster;

Ortsinhalt: Mitte;

}

.element {

Breite: 50 %; /* Breite beträgt 50 % der Rasterzelle */

Höhe: 50 %; /* Höhe beträgt 50 % der Rasterzelle */

}

Wenn die Rasterzellengröße nicht angegeben wird, ist das Element möglicherweise kleiner als erwartet. Für die grundlegende Zentrierung ist Flexbox oft einfacher.

3. Zentrieren mehrerer Elemente

CSS Grid kann auch mehrere Elemente in derselben Zelle verarbeiten:

• Weisen Sie derselben Zelle mehrere Elemente zu:

– Verwenden Sie grid-row und grid-column , um Elemente in derselben Rasterzelle zu platzieren.

• Elemente innerhalb der Zelle zentrieren:

– place-items: center; um die Elemente innerhalb der Rasterzelle zu zentrieren.

Beispielcode:

css

.container {

Anzeige: Raster;

Ortsinhalt: Mitte; /* Zentriert die Gitterzelle */

Ortselemente: Mitte; /* Zentriert Elemente innerhalb der Zelle */

}

.element {

Gitterreihe: 1;

Gitterspalte: 1; /* Alle Elemente werden in derselben Zelle platziert */

}

Bei diesem Aufbau werden mehrere Gegenstände in der Mitte des Behälters gestapelt, auch wenn sie unterschiedliche Größen haben.

Wichtige Punkte

– CSS Grid eignet sich hervorragend für komplexe Layouts und wenn Sie eine präzise Kontrolle über die Platzierung benötigen.

– Für einfache Zentrieraufgaben ist Flexbox normalerweise einfacher.

Mit diesen Grundlagen können Sie CSS Grid verwenden, um sowohl einzelne als auch mehrere Elemente in verschiedenen Szenarien zu zentrieren.

Methode 5: So zentrieren Sie Text in CSS

Das Zentrieren von Text unterscheidet sich ein wenig vom Zentrieren anderer Elemente wie Bilder oder Divs. Hier ist eine einfache Möglichkeit, dies zu erledigen:

Zentrieren eines Textblocks

Wenn Sie einen Textblock innerhalb eines Containers (wie einen Absatz in einem Div) zentrieren möchten, verwenden Sie die Eigenschaft text-align . Dies funktioniert am besten, wenn sich der Text innerhalb eines Elements auf Blockebene befindet, z. B. div , p oder h1 .

So geht's:

css

.container {

Textausrichtung: Mitte;

}

Dieser Code weist den Browser an, den Text im Container zu zentrieren. Wenn Sie auch den Container selbst zentrieren möchten, können Sie dafür Flexbox oder Grid verwenden:

css

.container {

Anzeige: Flex;

rechtfertigen-Inhalt: Mitte;

align-items: center;

Höhe: 100 Vh; /* Macht den Container auf volle Höhe für die vertikale Zentrierung */

}

Was ist mit Flexbox und Grid?

Flexbox und Grid eignen sich hervorragend zum Zentrieren ganzer Container, zentrieren jedoch nicht den Text innerhalb dieser Container. Wenn Sie Flexbox oder Raster verwenden, um einen Absatz zu zentrieren, wird der Textblock zentriert, nicht die einzelnen Zeilen oder Zeichen darin.

Zentrieren von Text mit Flexbox

Wenn Sie Flexbox verwenden, um einen Absatz zu zentrieren, gehen Sie folgendermaßen vor:

css

.container {

Anzeige: Flex;

rechtfertigen-Inhalt: Mitte;

align-items: center;

Höhe: 100 Vh;

}

Dadurch wird der gesamte Absatz im Container zentriert. Aber um den Text selbst innerhalb dieses Absatzes zu zentrieren, benötigen Sie auch text-align: center; .

Zukünftige CSS-Funktionen

Es gibt eine aufregende Entwicklung in CSS! Es kommen neue Funktionen, die das Zentrieren noch einfacher machen. Verwenden Sie vorerst Flexbox oder Grid mit text-align: center; ist der beste Weg, damit umzugehen.

Dieser einfache Ansatz trägt dazu bei, dass Ihr Text gut und zentriert aussieht, egal wo auf Ihrer Seite er sich befindet!

Wenn Sie jedoch alle oben genannten Methoden in Betracht ziehen, sind Sie möglicherweise verwirrt, welche für verschiedene Situationen am besten geeignet ist. Wenn das der Fall ist, sehen Sie sich die Schlussfolgerung unten an.

Abschluss

In diesem Blog haben Sie erfahren, wie Sie ein DIV-Element mithilfe verschiedener Tools wie Flexbox und automatischer Ränder horizontal, vertikal und in der Mitte der Seite zentrieren. Jedes dieser Tools hat seine eigenen Vorteile und Einsatzszenarien. Um Ihnen zu helfen, finden Sie hier einige häufige Anwendungsfälle:

• Automatische Ränder: Verwenden Sie dies für eine einfache horizontale Zentrierung.
• Flexbox: Ideal zum Zentrieren von Elementen in beide Richtungen und beim Arbeiten mit einer Zeile oder Spalte von Elementen.
• Zentrierung des Ansichtsfensters: Ideal für Pop-ups oder Elemente, die auf dem Bildschirm zentriert werden müssen.
• CSS-Raster: Ideal für komplexe Layouts und wenn die Zentrierung von Zeilen und Spalten erforderlich ist.

Wenn Sie Fragen oder Zweifel zu diesem Beitrag haben, teilen Sie uns dies bitte im Kommentarbereich unten mit:

Rahul

Rahul Kumar ist ein Web-Enthusiast und Content-Stratege, der sich auf WordPress und Webhosting spezialisiert hat. Mit jahrelanger Erfahrung und seinem Engagement, über Branchentrends auf dem Laufenden zu bleiben, entwickelt er effektive Online-Strategien, die den Traffic steigern, das Engagement steigern und die Conversions steigern. Rahuls Liebe zum Detail und seine Fähigkeit, überzeugende Inhalte zu erstellen, machen ihn zu einer wertvollen Bereicherung für jede Marke, die ihre Online-Präsenz verbessern möchte.