Wie man ein Element horizontal zentriert

Question

Wie kann ich eine horizontale Zentrierung einer <div> in einem anderen <div> CSS verwenden?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 1

Ich habe Flexbox o CSS-Raster

1. Flexbox

   #outer{
       display: flex;
       justify-content: center;
   }

2. CSS-Raster

   #outer {
       display: inline-grid;
       grid-template-rows: 100px 100px 100px;
       grid-template-columns: 100px 100px 100px;
       grid-gap: 3px;
   }

Sie können das Problem auf verschiedene Weise lösen.

Answer 2

Sie können eine einzige Codezeile verwenden, nämlich text-align:center .

Hier ist ein Beispiel:

#inner {
  text-align: center;
  }

<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

Answer 3

Es tut mir leid, aber dieses Baby aus den 1990er Jahren gearbeitet für mich:

<div id="outer">  
  <center>Foo foo</center>
</div>

Komme ich für diese Sünde in die Hölle?

Answer 4

Verwenden Sie diesen Code:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

Answer 5

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

Für die normale Sache, wenn Sie div in einer statischen Weise verwenden.

Wenn Sie möchten, dass ein div zentriert wird, wenn div absolut zu seinem Elternteil ist, hier ist ein Beispiel:

.parentdiv{
    position: relative;
    height: 500px;
}

.child_div{
   position: absolute;
   height: 200px;
   width: 500px;
   left: 0;
   right: 0;
   margin: 0 auto;
}