So zentrieren Sie ein <div> horizontal

Question

Wie kann ich mit CSS eine <div>innerhalb einer anderen horizontal <div>zentrieren?

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

Answer 1

Sie können dieses CSS auf das Innere anwenden <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Natürlich müssen Sie nicht eingestellt widthzu 50%. Jede Breite, die kleiner als die enthalten <div>ist, funktioniert. Das margin: 0 autoist, was die eigentliche Zentrierung bewirkt.

Wenn Sie auf Internet Explorer 8 (und höher) abzielen , ist es möglicherweise besser, stattdessen Folgendes zu verwenden:

#inner {
  display: table;
  margin: 0 auto;
}

Dadurch wird das innere Element horizontal zentriert und es wird ohne Festlegen eines bestimmten Elements gearbeitet width.

Arbeitsbeispiel hier:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

---

BEARBEITEN

Damit ist flexboxes sehr einfach, das Div horizontal und vertikal zentriert zu stylen.

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
  display: flex;
  justify-content: center;
}

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

Verwenden Sie die Eigenschaft, um das Div vertikal zentriert auszurichten align-items: center.

Answer 2

Wenn Sie keine feste Breite für die Innenseite festlegen möchten, können divSie Folgendes tun:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

Das macht das Innere divzu einem Inline-Element, mit dem zentriert werden kann text-align.

Answer 3

Die besten Ansätze sind mit CSS 3 .

Box Modell:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

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

Je nach Benutzerfreundlichkeit können Sie auch die box-orient, box-flex, box-directionEigenschaften nutzen.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Lesen Sie mehr über das Zentrieren der untergeordneten Elemente

• Link 2

• Link 3

• Link 4

Und das erklärt, warum das Box-Modell der beste Ansatz ist :

• Warum wird das W3C-Boxmodell als besser angesehen?

Answer 4

Angenommen, Ihr Div ist 200 Pixel breit:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Stellen Sie sicher, dass das übergeordnete Element positioniert ist , dh relativ, fest, absolut oder klebrig.

Wenn Sie die Breite Ihres Div nicht kennen, können Sie transform:translateX(-50%);anstelle des negativen Randes verwenden.

https://jsfiddle.net/gjvfxxdj/

Mit CSS calc () kann der Code noch einfacher werden:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Das Prinzip ist immer noch dasselbe; Legen Sie den Gegenstand in die Mitte und kompensieren Sie die Breite.

Answer 5

Ich habe dieses Beispiel erstellt, um zu zeigen, wie vertikal und horizontal vorgegangen wird align .

Der Code lautet im Grunde:

#outer {
  position: relative;
}

und...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Und es bleibt centerauch dann erhalten, wenn Sie die Größe Ihres Bildschirms ändern .

Answer 6

Einige Poster haben die CSS 3-Methode zur Zentrierung erwähnt display:box.

Diese Syntax ist veraltet und sollte nicht mehr verwendet werden. [Siehe auch diesen Beitrag] .

Der Vollständigkeit halber ist hier die neueste Möglichkeit, CSS 3 mithilfe des Flexible Box Layout-Moduls zu zentrieren .

Wenn Sie also ein einfaches Markup haben wie:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... und Sie möchten Ihre Elemente in der Box zentrieren. Folgendes benötigen Sie für das übergeordnete Element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Wenn Sie ältere Browser unterstützen müssen, die eine ältere Syntax für Flexbox verwenden , ist dies ein guter Ort, um nachzuschauen .

Answer 7

Wenn Sie keine feste Breite und keinen zusätzlichen Rand festlegen möchten, fügen Sie display: inline-blockIhrem Element etwas hinzu.

Sie können verwenden:

#element {
    display: table;
    margin: 0 auto;
}

Answer 8

Zentrieren eines Divs unbekannter Höhe und Breite

Horizontal und vertikal. Es funktioniert mit einigermaßen modernen Browsern (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera usw.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

Basteln Sie weiter an Codepen oder an JSBin .

Answer 9

Setze das widthund setze margin-leftund margin-rightauf auto. Das gilt allerdings nur für die Horizontale . Wenn Sie beide Möglichkeiten haben möchten, tun Sie dies einfach in beide Richtungen. Hab keine Angst zu experimentieren; Es ist nicht so, als würdest du irgendetwas kaputt machen.

Answer 10

Es kann nicht zentriert werden, wenn Sie ihm keine Breite geben. Andernfalls wird standardmäßig der gesamte horizontale Raum belegt.

Answer 11

Die Box-Align-Eigenschaft von CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Answer 12

Ich musste kürzlich ein "verstecktes" div (dh display:none;) zentrieren, in dem sich ein Tabellenformular befand, das auf der Seite zentriert werden musste. Ich habe den folgenden jQuery-Code geschrieben, um das versteckte Div anzuzeigen, und dann den CSS-Inhalt auf die automatisch generierte Breite der Tabelle aktualisiert und den Rand geändert, um ihn zu zentrieren. (Das Umschalten der Anzeige wird durch Klicken auf einen Link ausgelöst, aber dieser Code war für die Anzeige nicht erforderlich.)

HINWEIS: Ich teile diesen Code, da Google mich zu dieser Stack Overflow-Lösung gebracht hat und alles funktioniert hätte, außer dass versteckte Elemente keine Breite haben und erst nach ihrer Anzeige in der Größe geändert / zentriert werden können.

$(function(){ $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 13

Normalerweise verwende ich die absolute Position:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Das äußere Div benötigt keine zusätzlichen Eigenschaften, damit dies funktioniert.

Answer 14

Für Firefox und Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Für Internet Explorer, Firefox und Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Die text-align:Eigenschaft ist für moderne Browser optional, im Internet Explorer Quirks-Modus jedoch für die Unterstützung älterer Browser erforderlich.

Answer 15

Benutzen:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

Eine andere Lösung hierfür, ohne eine Breite für eines der Elemente festlegen zu müssen, ist die Verwendung des CSS 3- transformAttributs.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Der Trick besteht darin, dass translateX(-50%)das #innerElement 50 Prozent links von seiner eigenen Breite gesetzt wird. Sie können den gleichen Trick für die vertikale Ausrichtung verwenden.

Hier ist eine Geige, die die horizontale und vertikale Ausrichtung zeigt.

Weitere Informationen finden Sie im Mozilla Developer Network .

Answer 17

Chris Coyier, der in seinem Blog einen ausgezeichneten Beitrag zum Thema "Zentrieren im Unbekannten" geschrieben hat. Es ist eine Zusammenfassung mehrerer Lösungen. Ich habe eine gepostet, die in dieser Frage nicht gepostet ist. Es bietet mehr Browserunterstützung als die Flexbox- Lösung, und Sie verwenden keine, display: table;die andere Probleme verursachen könnte.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 18

Ich habe kürzlich einen Ansatz gefunden:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Beide Elemente müssen die gleiche Breite haben, um ordnungsgemäß zu funktionieren.

Answer 19

Siehe zum Beispiel diesen Link und das folgende Snippet:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

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

Wenn Sie viele Kinder unter einem Elternteil haben, muss Ihr CSS-Inhalt wie in diesem Beispiel auf Geige aussehen .

Der HTML-Inhalt sieht folgendermaßen aus:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Dann sehen Sie dieses Beispiel auf Geige .

Answer 20

Nur horizontal zentrieren

Nach meiner Erfahrung besteht der beste Weg, eine Box horizontal zu zentrieren, darin, die folgenden Eigenschaften anzuwenden:

Der Kontainer:

• sollte haben text-align: center;

Das Inhaltsfeld:

• sollte haben display: inline-block;

Demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Siehe auch diese Geige !

---

Horizontal und vertikal zentrieren

Meiner Erfahrung nach der beste Weg , um eine Kontrolle zu bringen sowohl vertikal als auch horizontal ist , einen zusätzlichen Behälter und gelten die folgenden Eigenschaften zu verwenden:

Der äußere Behälter:

• sollte haben display: table;

Der innere Behälter:

• sollte haben display: table-cell;
• sollte haben vertical-align: middle;
• sollte haben text-align: center;

Das Inhaltsfeld:

• sollte haben display: inline-block;

Demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Siehe auch diese Geige !

Answer 21

Der einfachste Weg:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 22

Wenn die Breite des Inhalts unbekannt ist, können Sie die folgende Methode verwenden . Angenommen, wir haben diese beiden Elemente:

• .outer -- Gesamtbreite
• .inner - keine Breite eingestellt (es kann jedoch eine maximale Breite angegeben werden)

Angenommen, die berechnete Breite der Elemente beträgt 1000 Pixel bzw. 300 Pixel. Gehen Sie wie folgt vor:

1. .innerInnen einwickeln.center-helper
2. Erstellen Sie .center-helpereinen Inline-Block. Es hat die gleiche Größe wie .inner300 Pixel.
3. Drücken Sie .center-helper50% nach rechts relativ zum übergeordneten Element. Dies platziert seine linke bei 500 Pixel wrt. äußere.
4. Drücken Sie .inner50% relativ zum übergeordneten Element nach links. Dies platziert seine linke bei -150 Pixel wrt. Mittelhelfer, dh seine linke Seite liegt bei 500 - 150 = 350 Pixel wrt. äußere.
5. Stellen Sie den Überlauf auf " .outerAusgeblendet", um eine horizontale Bildlaufleiste zu vermeiden.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Answer 23

Sie können so etwas tun

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Dadurch wird auch die #innervertikal ausgerichtet. Wenn Sie nicht möchten, entfernen Sie die Eigenschaften displayund vertical-align.

Answer 24

Textausrichtung: Mitte

Das Anwenden text-align: centerdes Inline-Inhalts wird im Zeilenfeld zentriert. Da das innere div jedoch standardmäßig width: 100%eine bestimmte Breite hat , müssen Sie eine bestimmte Breite festlegen oder eine der folgenden verwenden:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

---

Margin: 0 Auto

Die Verwendung margin: 0 autoist eine weitere Option und eignet sich besser für die Kompatibilität älterer Browser. Es funktioniert zusammen mit display: table.

#inner {
  display: table;
  margin: 0 auto;
}

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

---

Flexbox

display: flexverhält sich wie ein Blockelement und legt seinen Inhalt gemäß dem Flexbox-Modell fest. Es funktioniert mit justify-content: center.

Bitte beachten Sie: Flexbox ist mit den meisten Browsern kompatibel, jedoch nicht mit allen. Eine vollständige und aktuelle Liste der Browserkompatibilität finden Sie unter Anzeige: Flex funktioniert nicht mit Internet Explorer .

#inner {
  display: inline-block;
}

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

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

---

Verwandeln

transform: translateMit dieser Option können Sie den Koordinatenraum des visuellen CSS-Formatierungsmodells ändern. Mithilfe dieser Funktion können Elemente übersetzt, gedreht, skaliert und verzerrt werden. Um horizontal zu zentrieren, sind position: absoluteund erforderlich left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

---

<center> (Veraltet)

Das Tag

ist die HTML-Alternative zu text-align: center. Es funktioniert mit älteren und den meisten neuen Browsern, wird jedoch nicht als bewährte Methode angesehen, da diese Funktion veraltet ist und aus den Webstandards entfernt wurde.

#inner {
  display: inline-block;
}

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

Answer 25

Hier ist, was Sie auf kürzeste Weise wollen.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Answer 26

Flex bietet mehr als 97% Browser-Support und ist möglicherweise der beste Weg, um diese Art von Problemen in wenigen Zeilen zu lösen:

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

Answer 27

Sie können display: flexfür Ihr äußeres Div verwenden und zum horizontalen Zentrieren müssen Sie hinzufügenjustify-content: center

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

Oder besuchen Sie w3schools - CSS flex Property, um weitere Ideen zu erhalten.

Answer 28

Diese Methode funktioniert auch gut:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Für das Innere <div>ist die einzige Bedingung, dass es heightund widthnicht größer sein darf als die seines Behälters.

Answer 29

Nun, ich habe es geschafft, eine Lösung zu finden, die vielleicht in alle Situationen passt, aber JavaScript verwendet:

Hier ist die Struktur:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Und hier ist das JavaScript-Snippet:

$(document).ready(function() { $('.container .content').each( function() {
    container = $(this).closest('.container'); content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Wenn Sie es in einem reaktionsschnellen Ansatz verwenden möchten, können Sie Folgendes hinzufügen:

$(window).resize(function() { $('.container .content').each( function() {
    container = $(this).closest('.container'); content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Answer 30

Es gab eine Option, die ich gefunden habe:

Jeder sagt zu benutzen:

margin: auto 0;

Es gibt aber noch eine andere Option. Legen Sie diese Eigenschaft für das übergeordnete div fest. Es funktioniert jederzeit perfekt:

text-align: center;

Und sehen Sie, Kind gehen Zentrum.

Und schließlich CSS für Sie:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}