Vertikales Zentrieren eines div innerhalb eines anderen div

Question

Vertikales Zentrieren eines div innerhalb eines anderen div

Gefragt el 27 de Juni, 2011: Wann wurde die Frage gestellt
787758 Ansichten: Anzahl der Besuche der Frage
4 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich möchte ein Div zentrieren, das sich innerhalb eines anderen Divs befindet.

<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 können, hängt der Ansatz, den ich jetzt verwende, von der Breite und Höhe der #innerDiv . Wenn sich die Breite/Höhe ändert, muss ich die margin-top y margin-left Werte. Gibt es eine allgemeine Lösung, die ich verwenden kann, um die #innerDiv unabhängig von seiner Größe?

Ich habe herausgefunden, dass die Verwendung von margin: auto können horizontal ausgerichtet werden. #innerDiv in die Mitte. Aber was ist mit der vertikalen Ausrichtung?

Gefragt el 27 de Juni, 2011 von user700284

0 Stimmen

Was, wenn Sie margin-top: auto; margin-bottom: auto machen;

Kommentiert el 14 de Marsch, 2013 von Muhammad Umer

1 Stimmen

jsfiddle.net/k6ShD/4

Kommentiert el 7 de Marsch, 2014 von Muhammad Umer

0 Stimmen

Hier sind zwei einfache Methoden, um Divs innerhalb von Divs zu zentrieren, vertikal, horizontal oder beides (reines CSS): stackoverflow.com/a/31977476/3597276

Kommentiert el 20 de August, 2015 von Michael Benjamin

Anzeigen 1 weitere Kommentare

Answer 1

4 Antworten

Answer 2

0voto

user3943543 Punkte 157

Text align-center beim übergeordneten Element, display inline-block beim untergeordneten Element. Damit wird fast alles zentriert. Ich glaube, es heißt "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 Float's, viel Glück!

Beantwortet el 12 de Marsch, 2015 von user3943543 (157 Punkte )

1 Stimmen

Ihre Antwort bezieht sich auf die horizontale Zentrierung; die Frage bezieht sich auf die vertikale Zentrierung.

Kommentiert el 21 de Marsch, 2015 von apurkrt

Answer 3

0voto

Bhimashankar Sutar Punkte 119

Zum Zentrieren sowohl vertikal als auch horizontal ausrichten:

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

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

Beantwortet el 28 de November, 2017 von Bhimashankar Sutar (119 Punkte )

Answer 4

0voto

Jonathan Applebaum Punkte 5139

Ich möchte einen weiteren browserübergreifenden Weg aufzeigen, der diese Frage mit CSS3 lösen kann calc() .

Wir können die calc() Funktion zur Steuerung der margin-top Eigenschaft des untergeordneten Divs, wenn es absolut relativ zum übergeordneten Div positioniert ist.

Der Hauptvorteil der calc() ist, dass die Höhe des übergeordneten Elements jederzeit geändert werden kann und das untergeordnete Element immer in der Mitte ausgerichtet wird.

El margin-top Berechnung erfolgt dynamisch (durch css und nicht durch ein Skript und es ist eine sehr große Vorteil ).

Sehen Sie sich das an 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 always             
           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:

Beantwortet el 8 de Februar, 2019 von Jonathan Applebaum (5139 Punkte )

Answer 5

-5voto

godlark Punkte 157

Ich weiß, diese Frage wurde vor einem Jahr erstellt... Auf jeden Fall dank CSS3 können Sie leicht vertikal ausrichtet div in div (Beispiel dort http://jsfiddle.net/mcSfe/98/ )

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}

Beantwortet el 7 de Juni, 2012 von godlark (157 Punkte )

4 Stimmen

Dies scheint in Safari nicht zu funktionieren.

Kommentiert el 12 de Marsch, 2013 von sho

16 Stimmen

Dies funktioniert nur in Browsern, die das Mozilla-Framework verwenden (z. B. Firefox). Es ist eine schlechte Praxis, Code bereitzustellen/zu verwenden, der nicht browserübergreifend ist.

Kommentiert el 1 de Juni, 2013 von Jack B

Vertikales Zentrieren eines div innerhalb eines anderen div

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Vertikales Zentrieren eines div innerhalb eines anderen div

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: