it-swarm.com.de

Vertikales Zentrieren eines div in einem anderen div

Ich möchte ein div zentrieren, das in einem anderen div hinzugefügt wird.

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

Dies ist das CSS, das ich derzeit verwende.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

Wie Sie sehen, hängt der Ansatz, den ich jetzt verwende, von den Werten für Breite und Höhe von innerDiv ab. Wenn sich die Breite/Höhe ändert, muss ich die Werte für margin-top und margin-left ändern innerDiv immer unabhängig von ihrer Größe?

Ich habe herausgefunden, dass ich mit margin:auto das innereDiv horizontal zur Mitte ausrichten kann. Aber wie sieht es mit der vertikalen Allign-Mitte aus?

481
user700284

tl; dr

Die vertikale Ausrichtung in der Mitte funktioniert, aber Sie müssen table-cell für Ihr übergeordnetes Element und inline-block für das untergeordnete Element verwenden.

Diese Lösung funktioniert in IE6 & 7 nicht. 
Deiner ist der sicherere Weg für diese. 
Aber seit Sie Ihre Frage mit CSS3 und HTML5 markiert haben, dachte ich, dass es Ihnen nichts ausmacht, eine moderne Lösung zu verwenden.

Die klassische Lösung (Tabellenlayout)

Dies war meine ursprüngliche Antwort. Es funktioniert immer noch gut und ist die Lösung mit der breitesten Unterstützung. Das Tabellenlayout wird Ihre Rendering-Leistung beeinflussen . Daher würde ich vorschlagen, dass Sie eine der moderneren Lösungen verwenden.

Hier ist ein Beispiel


Getestet in: 

  • FF3.5 +
  • FF4 +
  • Safari 5+
  • Chrome 11+
  • IE9 +

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Moderne Lösung (transform)

Da Transformationen jetzt ziemlich gut unterstützt sind, gibt es eine einfachere Möglichkeit, dies zu tun.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo


♥ meine moderne Lieblingslösung (Flexbox)

Ich begann Flexbox immer mehr zu benutzen wird jetzt auch gut unterstützt Dies ist bei weitem der einfachste Weg.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

Weitere Beispiele und Möglichkeiten: Alle Methoden auf einer Seite vergleichen

666
meo

Eine andere Möglichkeit, diese horizontale und vertikale Zentrierung zu erreichen, ist:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( Referenz )

109
user700284

Eine andere Möglichkeit ist die Verwendung von Transform Translate

Äußere Divisionen müssen ihre position auf relative oder fixed setzen, und die Innere Div. Muss ihre position auf absolute, top und left auf 50% setzen und eine transform: translate(-50%, -50%) anwenden.

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Getestet in:

  • Opera 24.0 (Minimum 12.1)
  • Safari 5.1.7 (mindestens 4 mit -webkit- Präfix)
  • Firefox 31.0 (Minimum 3.6 mit -moz- Präfix, von 16 ohne Präfix) 
  • Chrome 36 (Minimum 11 mit -webkit- Präfix, von 36 ohne Präfix)
  • IE 11, 10 (Minimum 9 mit -ms- Präfix, von 10 ohne Präfix)
  • Weitere Browser, kann ich verwenden?
45
rnrneverdies

Vertical Align Alles mit nur 3 Zeilen CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Am einfachsten

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Nach shouldiprefix das sind die einzigen Präfixe, die Sie brauchen

Sie können auch% als Wert für die 'height'-Eigenschaft von .parent-of-element verwenden, sofern das übergeordnete Element eine Höhe oder einen Inhalt hat, der die vertikale Größe erweitert.

39
drjorgepolanco

Anstatt mich mit schwer zu schreibendem und schwer zu pflegendem CSS zu verbinden (dies erfordert auch eine sorgfältige Browserüberprüfung!), Finde ich es viel besser, CSS aufzugeben und stattdessen einfach wunderbares HTML 1.0 zu verwenden:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

Damit wird alles erreicht, was das ursprüngliche Poster wollte, und es ist robust und wartbar.

16
Iron Pillow

Ich persönlich bevorzuge den Trick, ein verstecktes Pseudoelement zu verwenden, um die gesamte Höhe des äußeren Containers zu überspannen, und es vertikal mit dem anderen Inhalt auszurichten. Chris Coyier hat einen schönen Artikel über die Technik. http://css-tricks.com/centering-in-the-unknown/ .__ Der große Vorteil davon ist die Skalierbarkeit. Sie müssen nicht die Höhe des Inhalts kennen oder sich um das Wachsen/Schrumpfen des Inhalts sorgen. Diese Lösung skaliert :).

Hier ist eine Geige mit all dem CSS, das Sie benötigen, und einem Funktionsbeispiel. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
5
Harry Robbins

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

Sie können dies tun, indem Sie einfach den oben erwähnten CSS-Stil hinzufügen. Alles Gute. für Abfrage Kommentar schreiben

4
Nishant Singh

Wenn Ihre height nicht eingestellt ist (auto); Sie können dem inneren Div etwas Polsterung (oben und unten) geben, um es vertikal zentrieren zu lassen:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
3
Majid

Div-Elemente in einem anderen Div vertikal zentrieren

Setzen Sie einfach den Container auf display:table und dann die inneren Elemente auf display:table-cell. Legen Sie eine height für den Container und dann vertical-align:middle für die inneren Elemente fest. Dies hat eine breite Kompatibilität bis zu den Tagen des IE9.

Beachten Sie, dass die vertikale Ausrichtung von der Höhe des übergeordneten Containers abhängt.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

3
Volomike

Bildbeschreibung hier eingeben100% es funktioniert 

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

2
Mangesh Jadhav

Fiddle-Link < http://jsfiddle.net/dGHFV/2515/ >

Versuche dies

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
2
Friend

Das funktioniert für mich. Breite und Höhe des äußeren Bereichs können definiert werden.

Hier der Code:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

2
phlegx

Ich habe die folgende Lösung seit über einem Jahr verwendet, sie funktioniert auch mit IE 7 und 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
2
Arsh

Wenn Sie nach dem Lesen der oben angegebenen wunderbaren Antworten immer noch nichts verstanden haben.

Hier sind zwei einfache Beispiele, wie Sie dies erreichen können. 

Anzeige verwenden: Tabellenzelle

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

Verwendung der Flexbox (Anzeige: Flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

Hinweis: Überprüfen Sie die Browserkompatibilität von display: table-cell und flex, bevor Sie die oben genannten Implementierungen verwenden.

2
shivamsupr

versuchen Sie, das innere Element folgendermaßen auszurichten:

top: 0;
bottom: 0;
margin: auto;
display: table;

und natürlich:

position: absolute;
1
VonAxt

Sie können das div in CSS mit flex vertikal und horizontal zentrieren.

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

Und der zweite ist wie folgt; 

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

Und das resultierende HTML:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>
1
Tariq Javed

Sie können dies mit einem einfachen Javascript (jQuery) -Block tun.

CSS:

#outerDiv{
    height:100%;
}

Javascript :

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
1
Ghanesh MV

Das wird bis zum IE6 funktionieren!

<!DOCTYPE html> ist auch für IE6 erforderlich! [erzwingt auch den IE6-Standard-Strict-Modus.

(Die Box-Einfärbung ist natürlich nur zu Demonstrationszwecken)

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

1
Bekim Bacaj

für innerdiv, das nicht den Wert für die Höhe angibt, gibt es keine reine css-Lösung, um es vertikal zentriert zu machen. Eine Javascript-Lösung könnte die offsetdicke von innerdiv erhalten, dann die style.marginTop berechnen. 

1
james li

textausrichtung in der Mitte des übergeordneten Elements, Anzeige des Inline-Blocks im untergeordneten Element Dies wird alles am meisten zentrieren. Ich glaube, es nennt sich "Block Float".

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

Dies ist auch eine gute Alternative für Posen, viel Glück!

0
user3943543

Ich möchte einen anderen Cross-Browser-Weg zeigen, der diese Frage mithilfe von CSS3 calc()..__ lösen kann.
Wir können die calc()-Funktion verwenden, um die margin-top-Eigenschaft des untergeordneten div zu steuern, wenn diese absolut relativ zum übergeordneten div positioniert ist.


Der Hauptvorteil bei der Verwendung von calc() ist, dass die Höhe des übergeordneten Elements jederzeit geändert werden kann und das untergeordnete div immer in der Mitte ausgerichtet ist.
Die margin-top-Berechnung wird dynamisch ausgeführt (durch CSS und nicht durch ein Skript und es ist ein sehr großer Vorteil).

check this LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will allways            center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

Ausgabe:

 enter image description here

0
jonathana

Vertikales Zentrieren eines div in einem anderen div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

0
antelove

So zentrieren Sie die Ausrichtung sowohl vertikal als auch horizontal:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}
0