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

Es ist möglich mit CSS 3 Flexbox . Bei der Verwendung von Flexbox haben Sie zwei Möglichkeiten.

1. Einstellen der übergeordneten display:flex; und Eigenschaften hinzufügen {justify-content:center; ,align-items:center;} zu Ihrem übergeordneten Element.

   outer {

   display: flex; justify-content: center; align-items: center; }

   <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

2. Einstellen der übergeordneten display:flex und hinzufügen margin:auto; für das Kind.

   outer {

   display: flex; }

   inner {

   margin: auto; }

   <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

Answer 2

Verwenden Sie den folgenden CSS-Inhalt für #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Ich verwende diesen CSS-Inhalt hauptsächlich zum Zentrieren div s.

Answer 3

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

Hier ist eine nicht erschöpfende Liste von Zentrierungsansätzen, die verwendet werden:

• margin et auto
• margin et calc()
• padding et box-sizing et calc()
• position: absolute et negativ margin-left
• position: absolute et negativ transform: translateX()
• display: inline-block et text-align: center
• display: table et display: table-cell
• display: flex et justify-content: center
• display: grid et justify-items: center

1. Zentrieren Sie ein Element auf Blockebene mit auto für horizontale Ränder

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 auto;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

2. Zentrieren Sie ein Element auf Blockebene mit calc mit horizontalen Rändern

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

3. Zentrieren Sie ein Element auf Blockebene mit calc mit horizontaler Polsterung + box-sizing

.outer {
  width: 300px;
  height: 180px;
  padding: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

4. Zentrieren Sie ein Element auf Blockebene mit position: absolute con left: 50% et negativ margin-left

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  margin-left: -75px;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

5. Zentrieren Sie ein Element auf Blockebene mit position: absolute con left: 50% et negativ transform: translateX()

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
  transform: translateX(-75px);
}

<div class="outer">
  <div class="inner"></div>
</div>

6. Zentrieren Sie ein Element mit display: inline-block et text-align: center

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  text-align: center;
  background-color: rgb(255, 0, 0);
}

.inner {
  display: inline-block;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

7. Zentrieren Sie ein Element mit display: table , padding et box-sizing

.outer {
  display: table;
  width: 300px;
  height: 180px;
  padding: 0 75px;
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  display: table-cell;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

8. Zentrieren Sie ein Element mit display: flex et justify-content: center

.outer {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  flex: 0 0 150px;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

9. Zentrieren Sie ein Element mit display: grid et justify-items: center

.outer {
  display: grid;
  justify-items: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  background-color: rgb(255, 255, 0);
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 4

Um ein Element horizontal zu zentrieren, können Sie diese Methoden verwenden:

Methode 1: Verwendung der Randeigenschaft

Handelt es sich bei dem Element um ein Element auf Blockebene, können Sie das Element mit der Eigenschaft margin zentrieren. einstellen margin-left et margin-right ist auf Auto (Kurzzeichen - margin: 0 auto ).

Dadurch wird das Element horizontal in der Mitte ausgerichtet. Wenn das Element kein Block-Level-Element ist, fügen Sie display: block Eigenschaft zu.

#outer {
  background-color: silver;
}
#inner {
  width: max-content;
  margin: 0 auto;
  background-color: #f07878;
}

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

Methode 2: CSS-Flexbox verwenden

Erstellen Sie einen Flexbox-Container und verwenden Sie justify-content Eigenschaft und setzen Sie sie auf center . Dadurch werden alle Elemente horizontal in der Mitte der Webseite ausgerichtet.

#outer {
  display: flex;
  justify-content: center;
  background-color: silver;
}
#inner {
  background-color: #f07878;
}

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

Methode 3: Verwendung der Technik der absoluten Position

Dies ist eine klassische Methode zur Zentrierung des Elements. einstellen postion:relative zum äußeren Element. Setzen Sie die Position des inneren Elements auf absolut und left: 50% . Dadurch wird das innere Element so verschoben, dass es von der Mitte des äußeren Elements ausgeht. Verwenden Sie nun die Eigenschaft transform und setzen Sie transform: translateX(-50%) Dadurch wird das Element horizontal zentriert.

#outer {
  position: relative;
  background-color: silver;
}
#inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f07878;
}

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

Answer 5

Sie können dies mit der Funktion CSS Flexbox . Sie müssen nur 3 Eigenschaften auf das übergeordnete Element anwenden, damit alles funktioniert.

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

Schauen Sie sich den folgenden Code an, damit Sie die Eigenschaften besser verstehen.

Erfahren Sie mehr über CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }

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