Vertikal zentrieren div in einem div mit der Höhe " auto

Gut, ich habe diese Struktur:

CSS:

    
    #parent{
       max-width: 800px;
       height: auto;
       margin: auto;
    }
    #child{
       position: absolute;
       width: 100%;
       height: 52px;
       display: none;
    }

HTML:

<div id="parent">
       <div id="child"></div>
    </div>

Dem untergeordneten div-Element ist standardmäßig ausgeblendet. Es wird sichtbar, durch die Verwendung von jQuery (.fadeIn). Die Frage ist jetzt, wie kann ich den vertikal-center-das Kind-element mit nur css?

In diesem Fall parent-div wird die Höhe des untergeordneten div, so dass die Zentrierung nicht zu viel Sinn?
Warum nur mit CSS wenn Sie fadeIn() mit jQuery? So dass Sie bereits abhängig sind JavaScript
Aber toller link: blog.themeforest.net/tutorials/vertical-centering-with-css

InformationsquelleAutor jurihandl | 2013-06-26

Habe ich einen Prototyp... Aber ich hatte zu ändern Sie Ihre HTML-und CSS-so ist es vielleicht nicht die beste Lösung: http://jsfiddle.net/TmCwB/

HTML

<div id="outerDiv">
    <div id="parent">
         <div id="child"></div>
    </div>
</div>

CSS

#outerDiv {
    margin: 0 auto;
    width: 200px;
}
#parent{   
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 500px;
}
#child{
    width: 100%;
    height: 52px;
    display: inline-block;
    background-color: blue;
}

Hoffe, das hilft...

InformationsquelleAutor Atrox111

1
```
#child{
   position: absolute;
   width: 100%;
   height: 52px;
    /*display:none;*/
   display: block;
   background-color: blue;
   top:50%;
}
```
fügen Sie einfach top:50% zu Ihren CSS-code.

http://jsfiddle.net/nirus/dry2Q/
- Funktioniert nicht richtig, weil das Kind-div erhalten positioniert, 50% von der Spitze, auch wenn es hat eine Höhe von 300px... Also position absolut ist, und nicht zentriert.
- Wenn Sie die Höhe Ihres Kindes bekannt, wird dieses noch arbeiten können durch Einstellung der margin-top zu negativen Hälfte Größe des Kindes.
InformationsquelleAutor Nirus
0

Ok, Jungs. Danke für Eure Antworten. Atrox11 Antwort die richtige war, aber ich fand heraus, dass es war ein anderes Problem, dass ich zu tun hatte.

Gibt es eine andere wraper div. Da alle meine Kinder divs sind absolute positioniert, das übergeordnete div-hatte eine Höhe von 0px. Dies war der eigentliche Fehler. Nachdem ich das behoben, alles funktionierte wie erwartet.

Sorry für die Frage. Ich würde es schätzen, wenn Sie nicht bewerten Sie es nach unten, da jeder einige Fehler macht, wenn er in Eile.

InformationsquelleAutor jurihandl

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.