Zentrieren ein Div horizontal in CSS

1. Verwenden Sie die Eigenschaft margin, um ein div horizontal in CSS zu zentrieren
2. Verwenden Sie Flexbox, um ein div horizontal in CSS zu zentrieren
3. Setzen Sie div auf inline-block und verwenden Sie die text-align-Eigenschaft, um es in CSS horizontal zu zentrieren

Der Artikel wird einige Möglichkeiten diskutieren, ein div in CSS horizontal zu zentrieren.

Verwenden Sie die Eigenschaft margin, um ein div horizontal in CSS zu zentrieren

Mit der Eigenschaft margin können wir ein div in CSS horizontal zentrieren.

Die Eigenschaft margin ist eine Abkürzung, um die Ränder aller vier Richtungen von einem Element festzulegen. Wir können die Eigenschaft verwenden, um die Ränder der Reihe nach top, right, bottom und left zuzuweisen.

Wir können die Option auto für den linken und rechten Rand verwenden, um ein div horizontal zu zentrieren. Der obere und untere Rand kann auf 0 gesetzt werden.

Die Option auto platziert das Element in der Mitte und teilt den linken und rechten Rand gleichmäßig auf. Wir sollten eine Breite für das zu zentrierende Element angeben.

Das Element nimmt die angegebene Breite ein und der verbleibende horizontale Platz wird gleichmäßig nach links und rechts aufgeteilt.

Nehmen wir ein Beispiel. Wenn die Breite eines Elements 50% beträgt, erzeugt die Eigenschaft auto einen linken Rand von 25% und einen rechten Rand von 25%.

Wir können auch die Eigenschaft display verwenden, um das Element auf table zu setzen. In einem solchen Fall muss die Breite nicht angegeben werden, wenn die Tabelle Inhalt enthält.

Die Breite des Inhalts wird verwendet. Wenn wir in das innere div keinen Inhalt schreiben, geben wir eine bestimmte Breite an.

Erstellen Sie beispielsweise ein div mit dem Klassennamen outerDiv in HTML. Verschachteln Sie dann ein weiteres innerDiv innerhalb des outerDiv in HTML.

Setzen Sie in CSS in der Klasse outerDiv width auf 100% und background auf blue. Als nächstes wählen Sie innerDiv und setzen die Eigenschaft display auf table.

Stellen Sie den background auf red, height und width auf 10vh und 10vw. Als letztes stellen Sie margin auf 0 auto.

Dabei ist die 0 in der Eigenschaft margin der Rand für oben und unten. Die Option auto ist für den Rand nach links und rechts. Wir können ein div horizontal zentrieren, indem wir die margin-Eigenschaft von CSS verwenden.

Beispielcode:

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

Verwenden Sie Flexbox, um ein div horizontal in CSS zu zentrieren

Wir können die Flexbox-Eigenschaften verwenden, um ein div in CSS horizontal zu zentrieren.

Flexbox bietet eine unkomplizierte Möglichkeit, ein Element vertikal und horizontal zu zentrieren. Wir können Flex erstellen und definieren, wie die Elemente in der Flexbox positioniert werden.

Die Eigenschaft justify-content kann verwendet werden, um die horizontale Position des Inhalts innerhalb der Flexbox anzugeben, wenn der Inhalt nicht den gesamten verfügbaren Platz einnimmt. Wir können im äußeren Container eine Flexbox erstellen und die Position des inneren Containers mit der Eigenschaft justify-content auf die Mitte setzen.

Wählen Sie beispielsweise die Klasse innerDiv und setzen Sie die Eigenschaften height und width auf 10vh und 10vw. Stellen Sie als Hintergrundfarbe die Farbe black ein. Wählen Sie als nächstes die Klasse outerDiv und geben Sie width auf 100%.

Setzen Sie die Hintergrundfarbe auf 100%. Erstellen Sie dann den Container als Flexbox, indem Sie die Eigenschaft display auf flex setzen. Schreiben Sie danach die Option center in die Eigenschaft justify-content.

Daher können wir die CSS-Flexbox verwenden, um ein div in CSS horizontal zu zentrieren.

Beispielcode:

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

Setzen Sie div auf inline-block und verwenden Sie die text-align-Eigenschaft, um es in CSS horizontal zu zentrieren

Eine andere Methode, ein div in CSS horizontal zu zentrieren, besteht darin, das div als inline-block-Element zu setzen. Genau wie inline beginnt ein inline-block-Element nicht in der neuen Zeile.

Wir können jedoch die width und height einstellen. Dann können wir die Eigenschaft text-align im äußeren div verwenden, um das innere div horizontal zu zentrieren.

Das innere div erbt die Eigenschaft text-align vom äußeren div, und das Element kann zentriert werden.

Legen Sie zum Beispiel etwas Höhe, Breite und Hintergrund für das innere div wie oben beschrieben fest. Verwenden Sie dann die Eigenschaft display, um das Element auf inline-block zu setzen.

Stellen Sie im äußeren div dessen Breite und Hintergrund ein. Setzen Sie abschließend die Eigenschaft text-align auf center.

Auf diese Weise können wir in CSS ein div horizontal zentrieren.

Beispielcode:

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>