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
787757 Ansichten: Anzahl der Besuche der Frage
5 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

5 Antworten

Answer 2

1voto

Bekim Bacaj Punkte 5223

Dies funktioniert bis zurück zum IE6!

<!DOCTYPE html> ist auch im IE6 erforderlich! [ erzwingt auch den Standard-Strict-Modus des IE6 ].

(Die Farbgebung der Box dient natürlich nur zu Demonstrationszwecken)

#outer{
        width: 180px;
        height: 180px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: center;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        display: inline-block;
        padding: .3em;
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,110,255,.7)}

<DIV id=outer>
<div id=center>
</div><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>

Beantwortet el 15 de August, 2017 von Bekim Bacaj (5223 Punkte )

Answer 3

1voto

Mangesh Jadhav Punkte 19

Bildbeschreibung hier eingeben Es funktioniert zu 100 %.

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

Beantwortet el 17 de Marsch, 2017 von Mangesh Jadhav (19 Punkte )

0 Stimmen

Das funktioniert großartig

Kommentiert el 9 de Februar, 2021 von Sentry.co

Answer 4

1voto

Tariq Javed Punkte 475

Sie können das div vertikal und horizontal in CSS mit Flex 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 die zweite ist die folgende;

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

Beantwortet el 28 de Marsch, 2016 von Tariq Javed (475 Punkte )

Answer 5

1voto

VonAxt Punkte 77

Versuchen Sie, das innere Element wie folgt auszurichten:

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

und natürlich:

position: absolute;

Beantwortet el 21 de Oktober, 2015 von VonAxt (77 Punkte )

0 Stimmen

Es ist vertikal, nicht horizontal

Kommentiert el 1 de September, 2016 von Sterling Diaz

Answer 6

1voto

Ghanesh MV Punkte 11

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

CSS :

#outerDiv{
    height:100%;
}

Javascript :

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

Beantwortet el 22 de August, 2014 von Ghanesh MV (11 Punkte )

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: