Wie zentriere ich ein Div für alle Browser vertikal?

1367

Ich möchte eine divmit CSS vertikal zentrieren. Ich möchte keine Tabellen oder JavaScript, sondern nur reines CSS. Ich habe einige Lösungen gefunden, aber allen fehlt die Unterstützung für Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Wie kann ich eine divin allen gängigen Browsern, einschließlich Internet Explorer 6, vertikal zentrieren?

css  cross-browser  alignment  vertical-alignment  centering 
— Burak Erdem
quelle
25
@MarcoDemaio Werden die Leute tableshier nicht ständig wegen Layouts missbilligt ?
— Chud37
14
@ Chud37: Es hängt davon ab, was Sie tun müssen. Tabellen für das Layout sind im Allgemeinen nicht vielseitig und lang, um Code einzugeben. Mit CSS können Sie ein 2-Spalten-Layout leicht in ein 3/4/5 Sols-Layout usw. ändern. In diesem Fall jedoch Anders ist es, Dutzende von CSS-Tipps und Tricks für eine so einfache Aufgabe zu verwenden, die mit einer perfekten browserübergreifenden Tabelle erledigt werden kann. Es ist, als würde man versuchen, durch das Fenster in Ihr Haus einzutreten, anstatt die Tür zu benutzen.
— Marco Demaio
Für den Fall, dass sich die Leute nicht für die Unterstützung älterer Browser interessieren
— Karolis Šarapnickis
1
css-vertical-center.com gibt es einige Lösungen mit Informationen zur Browserkompatibilität
— EscapeNetscape
2
Hier ist viele Möglichkeiten, dies zu tun css-tricks.com/centering-css-complete-guide
— Michael Yurin

Antworten:

1374

Im Folgenden finden Sie die beste Allround-Lösung, die ich erstellen kann, um ein Inhaltsfeld mit fester Breite und flexibler Höhe vertikal und horizontal zu zentrieren. Es wurde getestet und funktioniert für aktuelle Versionen von Firefox, Opera, Chrome und Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>
Erweitern Sie das Snippet

Anzeigen eines Arbeitsbeispiels mit dynamischem Inhalt

Ich habe einige dynamische Inhalte eingebaut, um die Flexibilität zu testen, und würde gerne wissen, ob jemand Probleme damit sieht. Es sollte auch für zentrierte Überlagerungen gut funktionieren - Leuchtkasten, Popup usw.

— Billbad
quelle
Ohne einen "absoluten" äußeren DIV drückt jeder Inhalt auf der Seite, bevor er den gesamten Block nach unten drückt. Dies macht es unabhängiger von anderen Seiteninhalten.
— Billbad
9
.outer {position:absolute;width:100%;height:100%}ist nicht notwendig, sie sind hier nur zur Demonstration. Wir brauchen nur display:table, wenn jemand so verwirrt ist wie ich.
— gfaceless
Ich habe festgestellt, dass dies 99% benötigt, um Bildlaufleisten zu vermeiden. Noch wichtiger ist, dass dies nur mit den ersten beiden Divs funktioniert, z. B. behalten .outerund middleden .innerund seinen Stil einfach ignorieren . Ich weiß nicht, worum es geht margin-left, margin-rightauf Auto gesetzt, da das Element dadurch nicht horizontal zentriert wird ?? !!!
— user10089632
Das Entfernen width: 100%;und Hinzufügen margin: 0 autozu .outerermöglicht auch eine variable Breite.
— Rokoko
@ user10089632 Nein, es geht nicht um Breite oder Höhe, sondern um Position. top: 0; left 0;fehlt, zumindest in Chrome, das den Standardwert auf 1 setzt.
— Michał Woliński
280

Eine weitere kann ich auf der Liste nicht sehen:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Browserübergreifend (einschließlich Internet Explorer 8 - Internet Explorer 10 ohne Hacks!)
  • Reaktionsschnell mit Prozentsätzen und min- / max-
  • Unabhängig von der Polsterung zentriert (ohne Kastengröße!)
  • heightmuss deklariert werden (siehe Variable Höhe )
  • Empfohlene Einstellung overflow: auto, um ein Überlaufen von Inhalten zu verhindern (siehe Überlauf)

Quelle: Absolute horizontale und vertikale Zentrierung in CSS

— Yisela
quelle
7
Dies funktionierte für mich, aber ich musste aus irgendeinem Grund eine feste Breite und Höhe in Chrom haben
— Ryan Knell
1
Vielen Dank. Ich brauchte einen Fix, bei dem ich weder die Höhe noch die Breite des PX berechnen musste, und das funktionierte perfekt.
— GFoley83
8
Tolle Lösung, vor allem, weil Sie keine Eltern-Div brauchen
— Luca Steeb
1
Dies macht eine Strecke, wenn die Höhe nicht festgelegt ist, anders als das: schöne Lösung
— Bart Burg
Wenn Sie eine Breite und Höhe haben, die nicht 100% sind, verwenden Siemargin: auto;
— Charles L.
253

Der einfachste Weg wären die folgenden 3 Zeilen CSS:

1) Position: relativ;

2) oben: 50%;

3) transformieren: translateY (-50%);

Es folgt ein BEISPIEL :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
Erweitern Sie das Snippet

— DrupalFever
quelle
4
Hinweis: Funktioniert nicht richtig, wenn die Höhe des äußeren Div mit "min-height: 170px" eingestellt ist
— Bart Burg
3
Interferiert mit Z-Index
— Ripper234
4
funktioniert nicht wenn heightvon außen divist 100%. Funktioniert dann nur mit position: absolute;.
— Arch Linux Tux
1
Ich hatte diese Lösung zuerst an anderer Stelle gefunden, aber ein zusätzliches Lob an diese spezielle Antwort für die Erwähnung der -webkit-transformVariante, die ich brauchte, damit diese Methode in Phantomjs funktioniert ... endete stundenlanges Kämpfen, also danke!
— drmrbrewer
2
Dies ist die beste Antwort. Dies ist unglaublich einfach und führt zu der geringsten Menge an vorhandener Arbeit und Funktionen für alles bis zum IE9, das niemand mehr verwendet. Lass uns diesem Kerl noch ein paar Gegenstimmen geben!
— Nick Steele
136

Eigentlich brauchst du zwei Divs für die vertikale Zentrierung. Das div, das den Inhalt enthält, muss eine Breite und Höhe haben.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
Erweitern Sie das Snippet

Hier ist das Ergebnis

— Vadim Ovchinnikov
quelle
4
Es ist ein alter Trick ... Top 50% und der obere Rand negativ die halbe Höhe für die innere Div
— Manatax
34
Es wird davon ausgegangen, dass Sie eine feste Höhe für div haben. funktioniert nicht, wenn div die Höhe ändern kann.
— Andre Figueiredo
116

Jetzt ist die Flexbox-Lösung ein sehr einfacher Weg für moderne Browser, daher empfehle ich dies für Sie:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
Erweitern Sie das Snippet

— Santosh Khalse
quelle
1
Wenn Sie eine haben navbar, können Sie die Höhe mit height: calc(100% - 55px)oder unabhängig von der Höhe Ihrer Größe anpassen navbar.
— Adrian
Ich musste auch Ränder / Polster vom Körper entfernen
— Ben
Funktioniert gut mit float. Vielen Dank.
— Amir A. Shabani
Bitte beachten Sie, dass sich dies in "neueren älteren" mobilen Safari-Browsern möglicherweise seltsam verhält. Die empfohlene Verwendung anstelle von Höhe ist flex-basiert auf der .container-Klasse
— Nine Magics
78

Edit 2020: Verwenden Sie diese Option nur, wenn Sie alte Browser wie IE8 unterstützen müssen (was Sie ablehnen sollten 😉). Wenn nicht, verwenden Sie die Flexbox.

Dies ist die einfachste Methode, die ich gefunden habe und die ich ständig benutze ( jsFiddle-Demo hier )

Vielen Dank an Chris Coyier von CSS Tricks für diesen Artikel .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
Erweitern Sie das Snippet

Die Unterstützung beginnt mit IE8.

— Armel Larcier
quelle
Da ich die Unterstützung für alte Browser verweigerte, war die Lösung für mich nicht Flexbox, sondern Grid-System. Es war ein bisschen ärgerlich für mich, Inhalte in einem Container zu zentrieren, der, wenn er zu klein wurde, eine Bildlaufleiste anzeigen musste, und der zentrierte Inhalt verlor den Bildlaufbereich mit allen anderen Methoden. Im Container benutze ich nur: {display: grid; Ausrichtungselemente: Mitte; } Hoffe das hilft jemandem.
— Thomasofen
63

Nach vielen Recherchen habe ich endlich die ultimative Lösung gefunden. Es funktioniert sogar für schwebende Elemente. Quelltext anzeigen 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
quelle
4
Dies funktioniert sehr gut, vorausgesetzt, Sie denken daran, dass das Containerelement eine implizite oder explizite Höhe haben muss. jsfiddle.net/14kt53un Ein kleines Problem für diejenigen, die relativ neu in CSS sind.
— Martyn Shutt
6
Von allen Antworten ist dies die einfachste! Ich hoffe, andere sehen auch Ihre Antwort! Vielen Dank! Übrigens 50%arbeitete für mich (nicht -50%)
— The Codesee
Das war unglaublich. Nach stundenlangem Suchen arbeitete dieser für mich. Ich musste translateY verwenden (50%) Ich bin mir sicher warum, aber es hat funktioniert. In meinem Fall wurde das übergeordnete Element von AEM Forms Engine erstellt, und ich kann nur bestimmte untergeordnete Elemente steuern.
— Tarekahf
41

Flexbox-Lösung

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
Erweitern Sie das Snippet

— Reggie Pinkham
quelle
3
Hinweis justify-content: center
— Peter Berg
36

Überprüfen Sie den Geigen-Link , um das Div auf einer Seite zu zentrieren .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Erweitern Sie das Snippet

Eine andere Möglichkeit ist die Verwendung einer Flexbox. Überprüfen Sie den Geigenlink .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>
Erweitern Sie das Snippet

Eine weitere Option ist die Verwendung einer CSS 3-Transformation:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Erweitern Sie das Snippet

— Nerdroid
quelle
3
@ArmelLarcier Das ist falsch. Relative Einheiten sind Prozentsätze %, ems und rems. Absolute oder feste Werte sind Pixel oder Punkte. Sie beziehen sich auf "es funktioniert nur mit einer deklarierten Höhe". Obwohl diese von Moes beschriebene Methode eine Höhe erfordert, ist der Prozentsatz der beste Prozentsatz, wenn Sie ihn in relativen Einheiten deklarieren, unabhängig davon, wie viel Inhalt sich innerhalb des zentrierten DIV befindet, den DIV vertikal erweitert, um seinem Inhalt zu entsprechen. Das ist das Schöne an dieser Methode. Die andere gute Sache ist, dass diese Methode in IE8 / 9/10 funktioniert, falls jemand diese Browser noch unterstützen muss.
— Ricardo Zea
@ricardozea Ich will nicht hartnäckig spielen, aber zu sagen, dass sich das zentrierte Div vertikal ausdehnt, während es vertikal zentriert bleibt, ist falsch. Versuch es. Ich weiß, wenn ich sage, dass die Höhe "fest" sein muss, dass es nicht das richtige Wort ist. Es ist in der Tat relativ zu seinem Elternteil. Wie auch immer, ich denke, Chris Coyers Methode ist sinnvoller, siehe meine Antwort stackoverflow.com/a/21919578/1491212 Sie ist mit IE8 kompatibel UND funktioniert für ein Element ohne angegebene Abmessungen.
— Armel Larcier
1
@ArmelLarcier Es ist alles gut. Ist nicht falsch Bruder. Probieren Sie es aus: codepen.io/shshaw/pen/gEiDt - Fügen Sie dem grünen Feld Absätze hinzu;]. Zugegeben, es verwendet Modernizr, um den Effekt zu erzielen, aber alles in allem ist es machbar. Ich habe Ihre Antwort und den Beitrag von CSS-Tricks.com gesehen, aber diese Methode macht mich nicht glücklich, sie verwendet zusätzliches Markup und das CSS ist zu ausführlich. Ich denke, die beste Lösung ist entweder die Verwendung der Flexbox oder der transform: translate(-50%, -50%);Technik. Für IE8 würde ich es einfach oben / in der Mitte ausgerichtet lassen und weitermachen.
— Ricardo Zea
1
@ricardozea Nun, der Codepen, mit dem Sie verlinkt haben, verwendet die Methode "display: table" und zusätzliches Markup, daher bin ich nicht überrascht. Wie auch immer, +1 zu deinem letzten Satz.
— Armel Larcier
23

Die einfachste Lösung ist unten:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
Erweitern Sie das Snippet

— Varsha Dhadge
quelle
2
In der Tat die bisher einfachste :) Obwohl ich die Stile auf ein äußeres Div anstatt auf einen Körper einstellen musste.
— Baburao
21

Leider - aber nicht überraschend - ist die Lösung komplizierter als man es sich wünscht. Außerdem müssen Sie leider zusätzliche Divs um das Div verwenden, das vertikal zentriert werden soll.

Für standardkonforme Browser wie Mozilla, Opera, Safari usw. müssen Sie festlegen, dass das äußere Div als Tabelle und das innere Div als Tabellenzelle angezeigt wird - die dann vertikal zentriert werden können. Für Internet Explorer müssen Sie das innere Div absolut innerhalb des äußeren Div positionieren und dann das obere als 50% angeben . Auf den folgenden Seiten wird diese Technik gut erläutert und es werden auch einige Codebeispiele bereitgestellt:

Es gibt auch eine Technik, um die vertikale Zentrierung mit JavaScript durchzuführen. Die vertikale Ausrichtung von Inhalten mit JavaScript und CSS zeigt dies.

— Seiten
quelle
20

Wenn sich jemand nur für Internet Explorer 10 (und höher) interessiert, verwenden Sie flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>
Erweitern Sie das Snippet

Flexbox-Unterstützung: http://caniuse.com/flexbox

— Bravedick
quelle
Android <4.4 unterstützt nicht align-items: center;!
— André Fiedler
Tatsächlich werden Ausrichtungselemente unterstützt: center; caniuse.com/#search=align-items
— t.mikael.d
@ t.mikael.d Vielleicht möchten Sie sich diese Tabelle genauer ansehen. Für Android <4.4 heißt es: "Unterstützt nur die alte Flexbox-Spezifikation und kein Wrapping."
— Nathan Osman
15

Eine moderne Möglichkeit, ein Element vertikal zu zentrieren, wäre die Verwendung flexbox.

Sie benötigen einen Elternteil, um die Größe zu bestimmen, und ein Kind, um zu zentrieren.

Im folgenden Beispiel wird ein Div auf die Mitte in Ihrem Browser zentriert. Was wichtig ist , (in meinem Beispiel) ist eingestellt height: 100%auf bodyund htmldann min-height: 100%zu Ihrem Container.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
Erweitern Sie das Snippet

— Marwelln
quelle
14

Nur vertikal zentrieren

Wenn Sie sich nicht für Internet Explorer 6 und 7 interessieren, können Sie eine Technik verwenden, die zwei Container umfasst.

Der äußere Behälter:

  • sollte haben display: table;

Der innere Behälter:

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

Das Inhaltsfeld:

  • sollte haben display: inline-block;

Sie können dem Inhaltsfeld jeden gewünschten Inhalt hinzufügen, ohne sich um dessen Breite oder Höhe zu kümmern!

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.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">
        Malcolm in the Middle
     </div>
   </div>
</div>
Erweitern Sie das Snippet

Siehe auch diese Geige !

Horizontal und vertikal zentrieren

Wenn Sie sowohl horizontal als auch vertikal zentrieren möchten, benötigen Sie außerdem Folgendes.

Der innere Behälter:

  • sollte haben text-align: center;

Das Inhaltsfeld:

  • sollte die horizontale Textausrichtung beispielsweise auf text-align: left;oder anpassen text-align: right;, es sei denn, Sie möchten, dass der Text zentriert wird

Demo:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>
Erweitern Sie das Snippet

Siehe auch diese Geige !

— John Slegers
quelle
13 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>
Erweitern Sie das Snippet

Verwandte: Bild zentrieren

— Anteliebe
quelle
10

Dies ist immer der Ort, an den ich gehe, wenn ich auf dieses Thema zurückkommen muss .

Für diejenigen, die den Sprung nicht machen wollen:

  1. Geben Sie den übergeordneten Container als position:relativeoder an position:absolute.
  2. Geben Sie eine feste Höhe für den untergeordneten Container an.
  3. Set position:absoluteund top:50%auf den untergeordneten Containern den von oben nach unten in der Mitte der Mutter zu bewegen.
  4. Stellen Sie den Rand oben ein: -yy, wobei yy die halbe Höhe des untergeordneten Containers ist, um das Element nach oben zu versetzen.

Ein Beispiel hierfür im Code:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
— Ninx
quelle
9

Verwenden der Flex-Eigenschaft von CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
Erweitern Sie das Snippet

oder mit display: flex;undmargin: auto;

Code-Snippet anzeigen

Textcenter anzeigen

Code-Snippet anzeigen

Verwenden der prozentualen Höhe und Breite (%).

Code-Snippet anzeigen

— Deepu Reghunath
quelle
5

CSS-Raster

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
Erweitern Sie das Snippet

— Andy Hoffman
quelle
5

Für Neuankömmlinge bitte versuchen 

display: flex;
align-items: center;
justify-content: center;
— Usman I.
quelle
1
Bitte fügen Sie ein Stapel-Snippet hinzu, das zeigt, wie dieser CSS-Code a vertikal ausrichtet div.
— Heretic Monkey
das funktioniert auch <div style="display:flex"><div style="margin:auto">Inner</div></div>
— idrisadetunmbi
Ich bin auf diese wunderbare Erklärung gestoßen, wie man Elemente ausrichtet und Inhalte rechtfertigt. Muss gelesen werden: stackoverflow.com/questions/42613359/…
— Usman I
4

Die Antwort von Billbad funktioniert nur mit einer festen Breite des .innerDiv. Diese Lösung funktioniert für eine dynamische Breite, indem das Attribut text-align: centerdem .outerdiv hinzugefügt wird .

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
Erweitern Sie das Snippet

— Ruwen
quelle
Interessant! Ich benutze eine fast identische Technik! -> stackoverflow.com/questions/396145/…
— John Slegers
4

Die drei Codezeilen transformfunktionieren praktisch in modernen Browsern und im Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Ich füge diese Antwort hinzu, da ich in der vorherigen Version dieser Antwort eine Unvollständigkeit festgestellt habe (und der Stapelüberlauf erlaubt mir nicht, einfach zu kommentieren).

  1. 'Position' relativ bringt das Styling durcheinander, wenn sich das aktuelle Div im Körper befindet und kein Container-Div hat. "Fest" scheint jedoch zu funktionieren, aber es korrigiert offensichtlich den Inhalt in der Mitte des Ansichtsfensters Position: relativ

  2. Außerdem habe ich dieses Styling zum Zentrieren einiger Overlay-Divs verwendet und festgestellt, dass in Mozilla alle Elemente in diesem transformierten Div ihre unteren Ränder verloren haben. Möglicherweise ein Rendering-Problem. Wenn Sie jedoch nur die minimale Polsterung zu einigen von ihnen hinzufügen, wird dies korrekt wiedergegeben. Chrome und Internet Explorer haben die Boxen (überraschenderweise) ohne Auffüllen gerendert Mozilla ohne Innenpolster Mozilla mit Polsterungen

— MandarK
quelle
3

Der folgende Link bietet eine einfache Möglichkeit, dies mit nur 3 Zeilen in Ihrem CSS zu tun:

Richten Sie alles vertikal mit nur 3 CSS-Zeilen aus .

Dank an : Sebastian Ekström .

Ich weiß, dass die Frage bereits eine Antwort hat, aber ich habe den Link wegen seiner Einfachheit als nützlich angesehen.

— Hicaro
quelle
3

Keine Antwort auf Browserkompatibilität, sondern auch das neue Grid und die nicht ganz so neue Flexbox-Funktion.

Gitter

Von: Mozilla - Grid Documentation - Div vertikal ausrichten

Browser-Unterstützung: Grid-Browser-Unterstützung

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Browser-Unterstützung: Flexbox-Browser-Unterstützung

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
— ctekk
quelle
3

Ich denke eine solide Lösung für alle Browser ohne Flexbox - "align-items: center;" ist eine Kombination aus Anzeige: Tabelle und vertikaler Ausrichtung: Mitte;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

:Demo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
quelle
2

Ich habe es damit gemacht (Breite, Höhe, Rand oben und Rand links entsprechend ändern):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
— Netuddki
quelle
Das ist nur gut, wenn Sie die Breite / Höhe des DIV kennen, den Sie zentrieren möchten. Dies ist nicht, was die Frage stellt
— egr103
2

Der Inhalt kann mithilfe der Flexbox einfach zentriert werden. Der folgende Code zeigt das CSS für den Container, in dem der Inhalt zentriert werden muss:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
— Mahendra Liya
quelle
2

Speziell für Eltern-Divs mit relativer (unbekannter) Höhe ist die Zentrierung im Unbekannten funktioniert Lösung hervorragend für mich. Der Artikel enthält einige wirklich schöne Codebeispiele.

Es wurde in Chrome, Firefox, Opera und Internet Explorer getestet.

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

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>
Erweitern Sie das Snippet

— Ruwen
quelle
2

Mach es einfach: Füge die Klasse zu deinem hinzu div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Und lesen Sie diesen Artikel für eine Erklärung. Hinweis: Heightist erforderlich.

— Anshul
quelle
2

Es gibt einen Trick, den ich kürzlich herausgefunden habe: Du musst ihn benutzen top 50%und dann machst du einentranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
Erweitern Sie das Snippet

— Melchia
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.