Eine einfache Möglichkeit, einen Block in der Mitte einer Seite mit CSS auszurichten

Das Erstellen eines Blocks in der Mitte einer Seite ist eine der häufigsten Aufgaben in der Webentwicklung. Das Zentrieren eines Elements in CSS scheint vielleicht nicht so einfach zu sein, wie es auf den ersten Blick scheint, aber es gibt tatsächlich mehrere Möglichkeiten, dieses Ziel zu erreichen.

Eine solche Methode ist die Verwendung der Eigenschaft margin: 0 auto;. Mit dieser Eigenschaft können Sie die Einrückung automatisch horizontal verteilen, wobei sich der Block in der Mitte der Seite befindet. Damit dies funktioniert, muss der Block auf eine feste Breite festgelegt werden. Zum Beispiel:

width: 300px;

margin: 0 auto;

Aber was ist, wenn wir eine variable Blockbreite haben? Sie können dazu eine andere Methode verwenden – das Element absolut positionieren und den linken und rechten Wert der Eigenschaft festlegen left: 50% - (halbe blockbreite); Dadurch können wir den Block bei jeder Größe horizontal zentrieren. Zum Beispiel:

position: absolute;

left: 50%;

transform: translateX(-50%);

Jetzt haben Sie mehrere Möglichkeiten, einen Block in der Mitte der Seite in CSS zu erstellen. Wählen Sie das Passende für Ihr Projekt aus und wenden Sie es an! Viel Glück für Sie!

Was ist CSS und warum ist es wichtig für die Webentwicklung

Einer der Hauptgründe, warum CSS ein wichtiges Werkzeug für die Webentwicklung ist, ist seine Fähigkeit, Inhalte und Ansichten zu teilen. Dies ermöglicht es Entwicklern, flexible und skalierbare Websites zu erstellen, indem sie nur die CSS-Stile ändern, ohne den HTML-Code zu ändern.

Darüber hinaus bietet CSS für Entwickler verständlicheren und lesbaren Code, der es einfacher macht, ihn zu unterstützen und zu warten. Mit CSS können Sie auch schöne und professionelle Webseiten erstellen, die an verschiedene Geräte und Bildschirme angepasst werden können.

Ein gutes Verständnis von CSS ist ein wesentlicher Bestandteil der Fähigkeiten eines Webentwicklers. Es ermöglicht Ihnen, moderne und attraktive Websites zu erstellen, was wiederum dazu beiträgt, Besucher anzuziehen und zu halten. Darüber hinaus hilft das Wissen über CSS Entwicklern, die Effizienz ihrer Arbeit zu verbessern, indem sie den Prozess zum Erstellen und Ändern des Aussehens einer Webseite beschleunigen.

Insgesamt ist CSS ein integraler Bestandteil der Website-Entwicklung, mit dem Sie schöne, strukturierte und professionelle Seiten erstellen können. Das Erlernen und Verwenden von CSS hilft Entwicklern, das gewünschte Erscheinungsbild zu erreichen und die Benutzererfahrung auf der Website zu verbessern.

Schritt 1: Erstellen eines Blocks mit fester Breite

Um einen Block in der Mitte der Seite zu erstellen, müssen Sie ihn als ersten Schritt mit einer festen Breite versehen. Dadurch können Sie die Größe des Blocks bestimmen und ihn in der Mitte der Seite festlegen.

Dazu wird die CSS-Eigenschaft width verwendet, mit der Sie die Breite des Blocks in Pixeln, Prozentsätzen oder anderen Maßeinheiten festlegen können.

.container 

In diesem Beispiel erstellen wir einen Block mit einer Klasse .container und legen Sie die Breite auf 500 Pixel fest. Verwenden Sie dann die Margin-Eigenschaft, um die automatischen Einzüge horizontal zu setzen, um den Block in der Mitte der Seite auszurichten.

Mit diesem Code wird der Block in der Mitte der Seite mit einer Breite von 500 Pixeln platziert. Sie können den Wert der width-Eigenschaft entsprechend Ihren Anforderungen ändern.

Verwenden der width-Eigenschaft zum Festlegen einer festen Blockbreite

Sie können die Eigenschaft in CSS verwenden width um eine feste Blockbreite festzulegen. Dadurch können Sie die Größe des Blocks steuern und ihn in der Mitte der Seite platzieren.

Verwenden Sie den Eigenschaftswert, um eine feste Blockbreite festzulegen width in Pixeln oder anderen Maßeinheiten. Zum Beispiel:

Im Beispiel wird ein Block mit einer Klasse angezeigt .my-block wird 500 Pixel breit sein.

Sie können die Eigenschaft verwenden, um einen Block in der Mitte der Seite zu platzieren margin mit Wert auto für linken und rechten Einzug. Zum Beispiel:

In diesem Fall hat der Block eine Breite von 500 Pixeln und wird automatisch horizontal zentriert.

Schritt 2: Horizontale Ausrichtung des Blocks in der Mitte der Seite

Der nächste Schritt, um einen Block in der Mitte der Seite zu erstellen, ist die horizontale Ausrichtung.

Dazu können wir eine Tabelle verwenden. Erstellen Sie eine Tabelle, legen Sie die Breite auf 100% fest und deaktivieren Sie die Grenzen.

Ihr Inhalt ist hier

Platzieren Sie Ihren Inhalt in einer Tabellenzelle. Jetzt wird alles, was sich in der Zelle befindet, automatisch zentriert.

Ihr Block wird nun horizontal auf der Seite zentriert. Im nächsten Schritt fügen wir eine vertikale Ausrichtung hinzu.

Anwenden der Eigenschaften margin und auto, um den Block horizontal auszurichten

Sie können die Eigenschaften margin und auto in CSS verwenden, um den Block horizontal auf der Seite auszurichten. Die Margin-Eigenschaft gibt die Einrückung für das Element an, und mit dem Wert auto können Sie den verfügbaren Platz für die Einrückung automatisch zuweisen.

Um einen Block mit den Eigenschaften margin und auto horizontal auszurichten, sind die folgenden Schritte erforderlich:

1. Legen Sie die angegebene Blockbreite mithilfe der width-Eigenschaft fest.
2. Setzen Sie die Eigenschaft margin-left und margin-right auf auto.

Zum Beispiel, wenn Sie den folgenden Block haben:

Содержимое блока

Dann können Sie die folgenden Stile anwenden, um sie zentriert auszurichten:

Das Ergebnis ist ein Block .der center-Block wird in der Mitte der Seite angezeigt, da die Blockbreite auf 50% festgelegt ist und die Einrückung links und rechts automatisch verteilt wird.

Die Verwendung der Eigenschaften margin und auto zum horizontalen Ausrichten eines Blocks ist eine einfache und effektive Möglichkeit, zentrierte Elemente auf einer Seite zu erstellen.

Schritt 3: Den Block vertikal in der Mitte der Seite ausrichten

Nachdem wir den Block horizontal in der Mitte der Seite platziert haben, müssen wir ihn auch vertikal ausrichten.

Dazu können wir die display-Eigenschaft mit dem Flex-Wert für das übergeordnete Element und die align-items-Eigenschaft mit dem center-Wert verwenden. Dadurch können wir den Inhalt des Blocks vertikal zentriert ausrichten.

.container display: flex;
align-items: center;
>

Unser Block wird nun vertikal auf der Seite zentriert ausgerichtet.

Verwenden der Eigenschaften display: flex und align-items: center für die vertikale Ausrichtung

Stellen Sie zunächst den Container, in dem Sie den Block zentriert ausrichten möchten, auf den Display: flex-Stil ein. Diese Eigenschaft verwandelt den Container in eine flexible Box, die mit anderen Flexbox-Eigenschaften gesteuert werden kann.

Um den Inhalt des Containers dann vertikal zentriert auszurichten, verwenden wir die Eigenschaft align-items: center . Es wird auf den Container angewendet und zentriert alle Elemente vertikal.

Zum Beispiel, wenn wir das folgende Markup haben:

Некоторый текст
Другой текст
Ещё один текст

Wir können die folgenden Stile verwenden, um den Block zentriert auszurichten:

Dadurch werden alle Absätze innerhalb des Containers vertikal zentriert ausgerichtet.

Verwenden der Eigenschaften display: flex und align-items: center für die vertikale Ausrichtung ist eine schnelle und einfache Möglichkeit, einen Block in der Mitte einer Seite in CSS zu erstellen.

Schritt 4: Erstellen eines adaptiven Blocks mit automatischer Breite

Verwenden Sie die Margin-Eigenschaft mit dem Wert auto, um einen adaptiven Block mit automatischer Breite in CSS zu erstellen. Dadurch können Sie den Block horizontal zentriert ausrichten und eine Breite festlegen, die sich automatisch an den Inhalt anpasst.

Um einen solchen Block zu erstellen, müssen Sie die folgenden Stile festlegen:

1. Legen Sie eine bestimmte Breite oder maximale Breite für den Block fest.
2. Margin-Wert einstellen: 0 auto; um den Block zentriert auszurichten.

Это адаптивный блок с автоматической шириной.
Он будет подстраиваться под содержимое, выравниваясь по центру.

.container

In diesem Beispiel hat der Block eine Breite von 300px, wenn der Bildschirm breiter als dieser Wert ist. Wenn der Bildschirm bereits kleiner als 300px ist, nimmt der Block die gesamte verfügbare Breite ein.

Mit diesen Stilen können Sie einen adaptiven Block mit automatischer Breite erstellen, der auf jedem Gerät in der Mitte der Seite ausgerichtet wird.