Aligner verticalement un div

Question

J'ai regardé plusieurs autres articles sur l'alignement vertical des divs, mais les solutions que je trouve ne semblent pas fonctionner dans mon cas d'utilisation. Je voudrais centrer verticalement la div avec la classe "I-want-to-center-this-while-ignoring-the-other-two-divs". J'ai un exemple très simple sur jsfiddle here.

Quelqu'un peut-il m'aider?

code:

HTML:

<div id="container"> 
     <div class="I-want-to-ignore-this"></div> 
     <div class="I-want-to-ignore-this float-right"></div> 
     <div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div> 
    </div> 

CSS:

#container { 

    height: 300px; 
    width: 100%; 
    border: 2px solid black; 
} 

.I-want-to-ignore-this{ 

    float:left; 
    height: 75px; 
    width: 100px; 
    border: 2px solid grey; 
} 

.float-right { 
    float: right; 
} 

.I-want-to-center-this-while-ignoring-the-other-two-divs{ 

    border: 2px solid green; 
    height: 150px; 
    width: 150px; 

    margin: auto; 
    vertical-align: center; 
} 

Answer 1

Dans la section des commentaires que vous avez indiqué que votre conteneur sera hauteur fixe. La solution la plus simple est de simplement rendre la position du centre div relative et de la déplacer vers le centre de la boîte avec l'attribut CSS "top".

.I-want-to-center-this-while-ignoring-the-other-two-divs{ 

    border: 2px solid green; 
    height: 150px; 
    width: 150px; 
    position:relative; 
    top:70px; 
    margin: auto; 
    vertical-align: center; 
} 

Voici le JSFiddle mis à jour.

(REMARQUE: Si vous changez de conteneurs taille que vous devez mettre à jour la variable, mais étant fixé cette solution devrait fonctionner correctement)

Answer 2

Ajouter ce centre div css:

position:absolute; 
top:50%; 
right:50%; 
margin-top:-75px; 
margin-right:-75px; 

Supprimer margin de là

Ajouter ce conteneur à:

position:relative; 

Modifier: JSFiddle

Answer 3

.I-want-to-center-this-while-ignoring-the-other-two-divs{ 
    position:relative; 
    top:25%; 
    border: 2px solid green; 
    height: 150px; 
    width: 150px; 
    margin: auto; 

} 

vérifier: JSFIDDLE

Votre conteneur est 300px de hauteur et la div que vous voulez centrer est 150px. En appliquant des maths simples pour centrer le div vous avez besoin de pad 50px ci-dessus et 50px ci-dessous pour centrer la div. donc haut: 25% ferait cela.

Il suffit d'ajouter la position et haut bien à votre css comme indiqué ci-dessus

Answer 4

Je voudrais simplement ajouter une marge supérieure à votre centre div:

.I-want-to-center-this-while-ignoring-the-other-two-divs { 
    border: 2px solid green; 
    height: 150px; 
    width: 150px; 
    margin: auto; 
    margin-top: 73px; 
} 

Puisque vous avez une hauteur fixe sur votre conteneur parent et votre div a connu la hauteur, c'est la façon la plus simple de le faire.

Le calcul est le suivant: (parent-hauteur - (enfant hauteur + bordure supérieure + bordure inférieure))/2

http://jsfiddle.net/audetwebdesign/7SfKW/10/