Wie kann ich mithilfe von CSS eine Schaltfläche innerhalb eines Div horizontal und vertikal zentrieren?

Zentrieren einer Schaltfläche innerhalb eines Div

In CSS gibt es mehrere Techniken, um Inhalte innerhalb eines übergeordneten Elements zu zentrieren. Lassen Sie uns die gängigsten Ansätze erkunden, um eine Schaltfläche innerhalb eines Divs horizontal zu zentrieren.

Verwendung von Flexbox (moderner Ansatz)

Flexbox ist ein CSS-Layoutmodul, das Flexibilität und Reaktionsfähigkeit bietet Layouts. So zentrieren Sie eine Schaltfläche vertikal und horizontal mit Flexbox:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Verwendung fester Breite und fester Ränder (Legacy-Ansatz)

Wenn die Schaltfläche eine feste Breite und das übergeordnete Element hat Die Breite von div ist fest oder 100 %, Sie können Ränder zum Zentrieren verwenden it:

button {
  margin: 0 auto;
}

Alternative Methoden zur horizontalen Zentrierung

• Text-align: Legen Sie die text-align-Eigenschaft des übergeordneten Elements fest div zu „center“.
• margin-left: Berechnen Sie die halbe Breite des Klicken Sie auf die Schaltfläche und legen Sie sie als negativen Rand für die linke Seite fest.

Vertikale Zentrierung

Um die Schaltfläche vertikal zu zentrieren, verwenden Sie die relative Positionierung und legen Sie die Top-Eigenschaft fest auf 50 %. Legen Sie dann position: relative auf der Schaltfläche selbst fest:

button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Beispielcode

Hier ist ein Beispiel-HTML- und CSS-Code zum Zentrieren einer Schaltfläche innerhalb eines Div:

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Dadurch wird die Schaltfläche „Hallo“ horizontal und vertikal im übergeordneten Element zentriert div.