Wie kann man ein <div> in einem anderen <div> horizontal zentrieren

Das Tag <div> wird verwendet, um Teile einer Seite oder eines Dokuments zu definieren. Es wird verwendet, um große Teile von HTML-Elementen zu gruppieren und mit CSS zu gestalten.

Wenn Sie ein <div> in einem andern <div> zentrieren möchten, verwenden Sie CSS-Stile, um es genau in der Mitte eines anderen <div> horizontal zu positionieren. Dazu müssen Sie id für beide divs (z. B. außen und innen) definieren und sie mit CSS-Eigenschaften margin, width, display, text-align und background-color stylen.

Lassen Sie uns sehen, wie man Schritt für Schritt ein <div> in einem andern <div> horizontal zentriert:

  • Als Erstes verwenden Sie width, um width des äußeren Elements einzustellen (d. h. 100% deckt die gesamte Linie ab). Änderen Sie es entsprechend der Größe, die Sie brauchen.
width: 100%;
  • Dann können Sie die Eigenschaft margin auf auto setzen, um das Element <div> innerhalb der Seite horizontal zu zentrieren. Die eigentliche Zentrierung wird von "margin: 0 auto" bewirkt. 
margin: 0 auto;
  • Stellen Sie Ihre bevorzugten Farben für äußere und innere divs mit der Eigenschaft background-color ein. 
background-color: yellow;
  • Verwenden Sie "inline-block", der ein Wert der Eigenschaft ist und das innere div als Inline-Element sowie als Block anzeigt.
display: inline-block;
  • Stellen Sie die Eigenschaft text-align in der äußeren div, um die innere div zu zentrieren. Beachten Sie, dass diese Eigenschaft nur bei Inline-Elementen funktioniert.
text-align: center;

Nun lassen Sie uns sehen, wie es aussehen wird:

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <style>
      #outer-div {
      width: 100%; 
      text-align: center;
      background-color: #0666a3 
      }
      #inner-div {
      display: inline-block; 
      margin: 0 auto;
      padding: 3px;
      background-color: #8ebf42
      }
    </style>
  </head>
  <body>
    <div id ="outer-div" width="100%">
    <div id ="inner-div"> Ich bin ein horizontal zentriertes div.</div>
    <div>
  </body>
</html>
Stellen Sie auch padding ein, um Leerschritt um Ihr inneres Element zu schaffen.