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

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

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>

Wenn Sie keine feste Breite für das Innere 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.

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?

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 gleichen Sie die Breite aus.

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 .

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 Module 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 wenn Sie Ihre Elemente in der Box zentrieren möchten, benötigen Sie Folgendes 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 ältere Syntax für Flexbox verwenden, finden Sie hier ein guter Ort, um .

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

Sie können verwenden:

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

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 .

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

Die Box-Align-Eigenschaft von CSS 3

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

Setze das widthund setze margin-leftund margin-rightauf auto. Das ist allerdings nur horizontal . 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.

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 zu aktualisieren und den Rand zu ändern, um ihn zu zentrieren. (Das Umschalten der Anzeige wird durch Klicken auf einen Link ausgelöst, aber dieser Code musste nicht angezeigt werden.)

HINWEIS: Ich teile diesen Code, da Google mich zu dieser Stapelüberlauflö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>

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.

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.

Verwenden:

#outerDiv {
  width: 500px;
}

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

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

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 .

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;
}

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.

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 .

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

Nach meiner Erfahrung besteht die beste Möglichkeit, eine Box sowohl vertikal als auch horizontal zu zentrieren, darin, einen zusätzlichen Container zu verwenden und die folgenden Eigenschaften anzuwenden:

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 !

Der einfachste Weg:

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

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

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 .innereine Breite von 300 Pixel.
3. drücken .center-helper 50% 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>

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.

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 % );
}

Textausrichtung: Mitte

Das Anwenden text-align: centerdes Inline-Inhalts wird im Zeilenfeld zentriert. Da das innere div jedoch standardmäßig width: 100%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>

Rand: 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. Sehen Sie hier für eine vollständige und aktuelle Liste der Browser - Kompatibilität.

#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. Mit ihm 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 <center>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>

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.

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;
}

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);
  })
});

Diese Methode funktioniert auch gut:

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

Für die innere <div>ist die einzige Bedingung , dass sein heightund widthdarf nicht größer sein als die seinen Behälter.

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 */
}