it-swarm.com.de

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

Ich möchte ein div vertikal mit CSS 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 ein div in allen gängigen Browsern, einschließlich Internet Explorer 6, vertikal zentrieren?

1284
Burak Erdem

Unten ist die beste Allround-Lösung, die ich bauen konnte, um ein Inhaltsfeld mit fester Breite und flexibler Höhe vertikal und horizontal zu zentrieren. Es wurde getestet und funktioniert für die neuesten 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>

Arbeitsbeispiel mit dynamischem Inhalt anzeigen

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.

1302
Billbad

Ein weiteres, das ich auf der Liste nicht sehen kann:

.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;
}
  • Cross-Browser (einschließlich Internet Explorer 8 - Internet Explorer 10 ohne Hacks!)
  • Responsive mit Prozentsätzen und Min-/Max-
  • Unabhängig von der Polsterung zentriert (ohne Größenänderung!)
  • height muss deklariert werden (siehe Variable Height )
  • Empfohlene Einstellung overflow: auto, um das Überlaufen von Inhalten zu verhindern (siehe Überlauf)

Quelle: Absolute horizontale und vertikale Zentrierung in CSS

265
Yisela

Der einfachste Weg wäre der folgende Zeilen von CSS:

1) Position: relativ;

2) oben: 50%;

) Transformation: 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>
214
DrupalFever

Eigentlich braucht man 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>

Hier ist das Ergebnis

132
sticks464

Jetzt ist die flexbox -Lösung für moderne Browser ein sehr einfacher Weg, daher empfehle ich Ihnen Folgendes:

.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>
90
Santosh Khalse

Dies ist die einfachste Methode, die ich gefunden habe und ich benutze sie die ganze Zeit ( 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>

Unterstützung beginnt mit IE8.

74
Armel Larcier

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% */
}
57
ymakux

Um das Div auf einer Seite zu zentrieren, überprüfen Sie den Fiddle-Link .

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

Eine andere Möglichkeit ist die Verwendung von flex box, ü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>

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>
34
Moes

Flexbox-Lösung

Notizen
1. Das übergeordnete Element erhält den Klassennamen.
2. Fügen Sie Flex-Vendor-Präfixe hinzu, falls dies von Ihren unterstützten Browsern erforderlich ist.

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>
30
Reggie Pinkham

Leider - aber nicht überraschend - ist die Lösung komplizierter, als man es sich wünschen würde. 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 alstableund das innere Div alstable angezeigt wird -cell- die dann vertikal zentriert werden kann. Für Internet Explorer müssen Siepositionierendie innere Divabsolutinnerhalb der äußeren Div und geben Sie dann dietopals50%. Auf den folgenden Seiten wird diese Technik gut erklärt und es werden auch einige Codebeispiele bereitgestellt:

Es gibt auch eine Technik, um die vertikale Zentrierung mit JavaScript durchzuführen. Vertikale Ausrichtung von Inhalten mit JavaScript und CSS demonstriert es.

21
sids

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>
20
Varsha Dhadge

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>

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

20
bravedick

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 display: table; haben

Der innere Behälter:

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

Das Inhaltsfeld:

  • sollte display: inline-block; haben

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>

Siehe auch this Fiddle !


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 text-align: center; haben

Das Inhaltsfeld:

  • stellen Sie die horizontale Textausrichtung neu ein, beispielsweise auf text-align: left; oder 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>

Siehe auch this Fiddle !

14
John Slegers

Eine moderne Möglichkeit, ein Element vertikal zu zentrieren, besteht darin, flexbox zu verwenden.

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

Im folgenden Beispiel wird ein Div in der Mitte Ihres Browsers zentriert. In meinem Beispiel ist es wichtig, height: 100% auf body und html und dann min-height: 100% für Ihren Container festzulegen.

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

Siehe auch: Bild zentrieren

13
antelove

Dies ist immer, wohin ich gehe, wenn ich zurückkommen muss diese Ausgabe .

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

  1. Geben Sie den übergeordneten Container als position:relative oder position:absolute an.
  2. Geben Sie eine feste Höhe für den untergeordneten Container an.
  3. Setzen Sie position:absolute und top:50% auf den untergeordneten Container, um den oberen Rand in die Mitte des übergeordneten Containers zu verschieben.
  4. Stellen Sie den oberen Rand ein: -yy wobei yy die halbe Höhe des untergeordneten Containers ist, um das Element nach oben zu versetzen.

Ein Beispiel dafü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>
10
Ninx

Ich habe gerade dieses CSS geschrieben und um mehr zu erfahren, gehen Sie bitte durch: Dieser Artikel mit vertikaler Ausrichtung richtet alles mit nur 3 Zeilen CSS aus .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
8
Sanjib Debnath

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

oder durch mit display: flex; und margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}
<div class="parent">
    <div class="child"></div>
</div>

Textmitte anzeigen

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

Mit Prozent (%) Höhe und Breite.

.parent {
    position: absolute;
    height:100%;
    width:100%;
    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> 
6
Deepu Reghunath

Die Antwort von Billbad funktioniert nur mit einer festen Breite von .inner div. Diese Lösung funktioniert für eine dynamische Breite, indem das Attribut text-align: center zum Div .outer 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>
4
Ruwen

Ich denke, eine solide Lösung für alle Browser ohne flexbox - "align-items: center;" ist eine Kombination aus Anzeige: Tabelle und vertikal ausrichten: 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/

3
Martin Wantke

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

Vertikale Ausrichtung mit nur 3 Zeilen CSS .

Dank an : Sebastian Ekström .

Ich weiß, dass die Frage bereits eine Antwort hat, aber ich sah Nützlichkeit im Link für seine Einfachheit.

3
Hicaro

Ich antworte nicht aus Gründen der Browserkompatibilität, sondern um auch das neue Grid und die nicht so neue Funktion Flexbox zu erwähnen.

Gitter

From: Mozilla - Grid Documentation - Div vertikal ausrichten

Browserunterstützung: Grid Browser Support

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;
3
ctekk

Die drei Codezeilen, die transform verwenden, funktionieren 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 einen Kommentar abzugeben).

  1. 'position'-Relativ bringt das Styling durcheinander, wenn sich das aktuelle Div im Body befindet und kein Container-Div hat. Allerdings scheint 'behoben' zu funktionieren, aber es korrigiert offensichtlich den Inhalt in der Mitte des Ansichtsfensters position: relative

  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. Das Hinzufügen nur der minimalen Polsterung zu einigen von ihnen machte es jedoch korrekt. Chrome und Internet Explorer haben die Boxen (überraschenderweise) ohne Auffüllen gerendert mozilla without inner paddingsmozilla with paddings

3
MandarK

CSS-Gitter

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
3
Andy Hoffman

Insbesondere für übergeordnete Divs mit relativer (unbekannter) Höhe eignet sich die Lösung Zentrierung im Unbekannten hervorragend für mich. Der Artikel enthält einige wirklich nette 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>
2
Ruwen

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>
2
Netuddki

Es gibt einen Trick, den ich kürzlich herausgefunden habe: Du musst top 50% und dann machst du translateY(-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>
2
Melchia

Für Neuankömmlinge versuchen Sie es bitte

display: flex;
align-items: center;
justify-content: center;
2
Usman Iqbal

Ich benutze das. Es funktioniert in Internet Explorer 8 und höher:

height:268px - für display:table verhält sich wie min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>
1
Rantiev

Der Inhalt kann einfach mit der Flexbox 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;
}
1
Mahendra Liya

Ich finde dies am nützlichsten. Es liefert das genaueste 'H'-Layout und ist sehr einfach zu verstehen.

Der Vorteil dieses Markups ist, dass Sie Ihre Inhaltsgröße an einem einzigen Ort definieren -> "Seiteninhalt".
Die Farben des Seitenhintergrunds und seine horizontalen Ränder werden in den entsprechenden Divs definiert.

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

Und hier mit CSS getrennt:

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}
1
G.Y

Diese Lösung hat bei mir funktioniert, wenn Sie ein Blockelement haben (z. B.). Ich habe die Farben verwendet, um die Lösung klarer zu machen.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

JSFiddle Code Demo

1
Birol Efe

Folgendes funktioniert in meinem Fall und wurde in Firefox getestet.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

Die Größe des Div und die Größe der Eltern sind dynamisch. Ich benutze es, wenn es andere Elemente auf demselben übergeordneten Element gibt, die höher sind als das Zielelement, bei dem beide horizontal inline positioniert sind.

1
KeepMove

Tun Sie es einfach: Fügen Sie die Klasse in Ihrem div hinzu:

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

Und lesen Sie dieser Artikel für eine Erklärung. Hinweis: Height ist erforderlich.

1
Anshul

Vertikal & Horizontal MITTE

HTML

<div id="dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

Genießen!

0
Armand

Das Beste wäre:

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150 Pixel, weil das in diesem Fall die Hälfte der Höhe des Div ist.

0
Fastboy619

Ich habe gerade einen anderen Weg gefunden, der für mich funktioniert hat:

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Weitere Informationen

Deklarieren Sie dieses Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Dann binde es in dein Element ein:

.element{
    @include vertical-align();
}
0
Gothburz

Dies ist bei weitem der einfachste Ansatz und funktioniert auch bei nicht blockierenden Elementen. Der einzige Nachteil ist, dass es sich um eine Flexbox handelt. Ältere Browser unterstützen dies daher nicht.

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

Link zum Codepen:

http://codepen.io/damianocel/pen/LNOdRp

Der wichtige Punkt hierbei ist, dass für die vertikale Zentrierung ein übergeordnetes Element (Container) definiert werden muss und das Bild eine geringere Höhe als das übergeordnete Element haben muss.

0
damiano celent

Diese Methode verwendet keine Transformation. Es ist also kein Problem, wenn die Ausgabe unscharf wird.

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
0
th3pirat3

Mit der transform -Eigenschaft können wir leicht ein vertikal zentriertes Div ausführen.

.main-div {
    background: none repeat scroll 0 0 #999;
    font-size: 18px;
    height: 450px;
    max-width: 850px;
    padding: 15px;
}

.vertical-center {
    background: none repeat scroll 0 0 #1FA67A;
    color: #FFFFFF;
    padding: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
<div class="main-div">
    <div class="vertical-center">
        <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>
    </div>
</div>

Siehe hier für den vollständigen Artikel

0
inaam husain