So zentrieren Sie ein <div> horizontal

4287

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Peter Mortensen
quelle
13
Von diesen großartigen Antworten möchte ich nur hervorheben, dass Sie "#inner" eine "Breite" geben müssen, oder es wird "100%" sein, und Sie können nicht sagen, ob es bereits zentriert ist.
Jony
Joma Tech hat mich hierher gebracht
Barbu Barbu
@Barbu Barbu: Auf welche Weise? In welchem ​​Kontext?
Peter Mortensen

Antworten:

4726

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>

Bharadhwaj
quelle
12
Für die vertikale Zentrierung verwende ich normalerweise "Linienhöhe" (Linienhöhe == Höhe). Das ist einfach und nett, aber es funktioniert nur mit einem einzeiligen Inhaltstext :)
Nicolas Guillaume
98
Sie müssen das! DOCTYPE-Tag auf Ihrer HTML-Seite verwenden, damit es im IE gut funktioniert.
Fabio
15
Beachten Sie, dass möglicherweise "float: none;" für den #inner.
Mert Mertce
15
Sie setzen auch den oberen und unteren Rand auf 0, was nichts damit zu tun hat. Besser gesagt, margin-left: auto; margin-right: autodenke ich.
Emmanuel Touzery
13
Nicht unbedingt margin:0 auto: Es kann margin: <whatever_vertical_margin_you_need> autoder horizontale Rand sein.
YakovL
1246

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.

Alfred
quelle
13
@SabaAhang die richtige Syntax dafür wäre float: none;und wird wahrscheinlich nur benötigt, weil #inner eine floatvon entweder leftoder rightvon irgendwo anders in Ihrem CSS geerbt hat .
Doug McLean
8
Dies ist eine schöne Lösung. Denken Sie daran , dass innere erben , text-alignso dass Sie innere des festlegen möchten text-alignauf initialoder einen anderen Wert.
pmoleri
schöne lösung ich denke schon
simon
381

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

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

Konga Raju
quelle
25
Stellen Sie sicher, dass Sie diese Antwort zuerst gelesen haben, bevor Sie mit der Implementierung dieser Lösung beginnen.
Cimmanon
4
Safari benötigt noch -webkitFlaggen für Flexbox ( display: -webkit-flex;und -webkit-align-items: center;und -webkit-justify-content: center;)
Joseph Hansen
Ich denke immer, dass die Verwendung von Lots-Code eine schlechte Praxis ist. Zum Beispiel zentriere ich mit diesem Code mein div: display: table; Rand: Auto; einfach und leicht
Simon
Bin ich es oder ist dieses Code-Snippet nicht zentriert
Mike
Im Jahr 2020 können wir flexbox caniuse.com/#feat=flexbox
tonygatta
251

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.

nuno_cruz
quelle
Diese Lösung gefällt mir nicht, da Sie nicht horizontal über das gesamte Element scrollen können, wenn das innere Element zu breit für den Bildschirm ist. Rand: 0 Auto funktioniert besser.
Aloso
Rand links: Auto; Rand rechts: Auto; zentriert ein Element auf
Blockebene
Die Standardbreite für die meisten Elemente auf Blockebene ist auto, wodurch der verfügbare Bereich auf dem Bildschirm ausgefüllt wird. Wenn Sie nur zentriert sind, befindet es sich in derselben Position wie die linke Ausrichtung. Wenn Sie möchten, dass es visuell zentriert wird, sollten Sie eine Breite festlegen (oder eine maximale Breite, obwohl Internet Explorer 6 und frühere Versionen dies nicht unterstützen und IE 7 dies nur im Standardmodus unterstützt).
Killscreen
228

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 .

Tom Maton
quelle
12
+1 für diese Methode wollte ich damit antworten. Beachten Sie, dass Sie für das Element, das Sie horizontal zentrieren möchten, eine Breite deklarieren müssen (oder eine Höhe, wenn Sie vertikal zentrieren möchten). Hier ist eine umfassende Erklärung: codepen.io/shshaw/full/gEiDt . Eine der vielseitigsten und am weitesten verbreiteten Methoden zum vertikalen und / oder horizontalen Zentrieren von Elementen.
stvnrynlds
6
Sie können keine Auffüllung innerhalb des div verwenden, aber wenn Sie der Illusion geben möchten, verwenden Sie einen Rand derselben Farbe.
Eichhörnchen
Ich denke , für diese Methode funktioniert, müssen Sie die mit und die Höhe des inneren div einstellen
Teilung einstellen Nicolas S.Xu
212

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

Wenn Sie ältere Browser unterstützen müssen, die ältere Syntax für Flexbox verwenden, finden Sie hier ein guter Ort, um .

Danield
quelle
Was meinst du mit "Syntax ist veraltet", ist sie veraltet?
Konga Raju
6
Die Flexbox-Spezifikation wurde 3 Mal überarbeitet. Der jüngste Entwurf stammt aus dem September 2012, in dem alle vorherigen Entwürfe offiziell abgelehnt werden. Die Browserunterstützung ist jedoch unvollständig (insbesondere bei alten Android-Browsern): stackoverflow.com/questions/15662578/…
cimmanon
Dies funktionierte für mich in Chrome, als Justin Polieys Version dies nicht tat.
Vern Jensen
Ist nicht das "Rechtfertigungsinhalt: Zentrum"; für die vertikale Ausrichtung und die "Ausrichtungselemente: Mitte"; für die horizontale Ausrichtung?
Wouter Vanherck
3
@WouterVanherck es kommt auf den flex-directionWert an. Wenn es "Zeile" ist (Standardeinstellung) - dann justify-content: center; ist es für die horizontale Ausrichtung (wie ich in der Antwort erwähnt habe). Wenn es "Spalte" ist - dann justify-content: center;ist es für die vertikale Ausrichtung.
Danield
140

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;
}
Salman von Abbas
quelle
3
gleiche Anforderungen wie Anzeige: Inline-Block auch ( quirksmode.org/css/display.html )
montrealmike
Ich habe das auch benutzt, aber ich habe es noch nie display: table;zuvor erlebt . Was tut es?
Matt Cremeens
97

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 .

iamnotsam
quelle
89

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

Gizmo
quelle
49
und wenn Sie die Breite nicht kennen? Sagen Sie, weil der Inhalt dynamisch ist?
Gman
maximale Breite? was ist damit?
1
Ich benutze width: fit-content;und margin: 0 auto. Ich denke, das kann mit unbekannter Breite funktionieren.
Rick
89

Die Box-Align-Eigenschaft von CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
neoneye
quelle
8
Stellen Sie sicher, dass Sie diese Antwort zuerst gelesen haben, bevor Sie mit der Implementierung dieser Lösung beginnen.
Cimmanon
88

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.

Sneakyness
quelle
62

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>

James Moberg
quelle
59

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.

william44isme
quelle
Dies funktioniert möglicherweise nicht, wenn Sie andere Divs unterhalb des zentrierten Divs haben.
NoChance
54

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.

ch2o
quelle
5
Es ist keine Textausrichtungseigenschaft erforderlich. Es ist völlig unnötig.
Touhid Rahman
Die Textausrichtung ist tatsächlich erforderlich, damit sie im IE-Schnellmodus funktioniert. Wenn Sie also nichts dagegen haben, einen kleinen Ausdruck hinzuzufügen, um ältere Browser zu unterstützen, lassen Sie ihn dort. (IE8 mit IE8-Regeln und IE7-Regeln funktionieren beide ohne Textausrichtung, möglicherweise sind nur IE6 und älter betroffen)
heytools
52

Verwenden:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Ankit Jain
quelle
47

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 .

Kilian Stinson
quelle
2
Möglicherweise benötigen Sie auch Herstellerpräfixe:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou
45

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;
}
Willem de Wit
quelle
39

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.

BenjaminRH
quelle
Stellen Sie diese Regel #innernur für : #inner { position:relative; left:50%; transform:translateX(-50%); }. Dies funktioniert für jede Breite.
Jose Rui Santos
33

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 .

Lalit Kumar
quelle
28

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 !

John Slegers
quelle
27

Der einfachste Weg:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

joan16v
quelle
1
Wie Ihre Geige bemerkt, muss auf #inner eine Breite eingestellt sein.
Michael Terry
#outerbraucht keine width:100%;wie die <div>standardmäßig immer hat width:100%. und text-align:centerist auch überhaupt nicht notwendig.
Mobarak Ali
27

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>

Salman A.
quelle
26

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.

Kenneth Palaganas
quelle
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 % );
}
caniz
quelle
3
Das zentriert es vertikal.
Michael Terry
22

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:


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.


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.


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%.


<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.

Paolo Forgia
quelle
22

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.

Milan Panigrahi
quelle
21

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;
}
Sandesh Damkondwar
quelle
21

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);
  })
});
Miguel Leite
quelle
21

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.

Billal Begueradj
quelle
19

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 */
}
Pnsadeghy
quelle
Textausrichtungsarbeit für die Textausrichtung in seinem Container, nicht für den Container an seinem übergeordneten Container.
Lalit Kumar Maurya
Ich teste es, ich Problem mit Kind auf Mitte setzen, muss, wenn Sie mehr ein Kind haben, mehr mal Rand: 0 automatische Schrift Antwort, aber, Textausrichtung Mitte, für Eltern machen dieses Kind Mitte sein, auch wenn sie Element und sind kein Text sein, testen und sehen, was passiert
Pnsadeghy
Nur Text in der Mitte ausrichten. Sie haben Recht, aber wenn Sie ein Container-CSS schreiben, das ein Kind mit unterschiedlicher Breite und Farbe enthält, funktioniert Ihr Code nicht. Teste es noch einmal !!!!
Lalit Kumar Maurya
Sehen Sie sich dieses Beispiel jsfiddle.net/uCdPK/2 an und sagen Sie mir, was Sie darüber denken !!!!!
Lalit Kumar Maurya