J'utiliserais normalement un positionnement absolu et placerais le sommet à 50% avec un bord supérieur négatif (la moitié de la taille de l'enfant) pour le centrer verticalement. Dans ce cas, cela ne fonctionnera pas car la hauteur de l'élément enfant variera.Alignement vertical sans connaître la hauteur en CSS?
Y a-t-il un moyen de centrer verticalement une div dans un div sans connaître la taille de l'enfant?
utilisation haut, en bas de rembourrage pour centrer les éléments verticalement, avec ou sans les définitions de la hauteur ...
Je ne pense pas que le padding fonctionnera si la hauteur de l'élément change, le seul La solution CSS est d'utiliser table-cellule, ou vous pouvez utiliser javascript – Tom
Tim: s'il vous plaît lire la question, il cherche la solution div. – Conex
Utilisation de l'affichage: la solution de table-cellule utilise toujours div, voir http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – Tom
Vous pouvez afficher l'élément: cellule-cellule et positionner vertical-aligner: centre. Je ne recommande pas d'utiliser display: table, mais c'est la solution la plus simple je pense
Vous pouvez également saisir la taille de l'enfant facilement avec JavaScript dynamiquement, et encore plus facilement avec une bibliothèque JS comme jQuery. Selon votre profil, vous avez une certaine connaissance de jQuery, donc je suggérerais cette route. Si vous avez besoin d'aide pour cette solution, faites-le moi savoir.
Les centres fonctionnels jquery suivants en supposant verticalement la pièce que vous positionnement est la position déjà position absolue et le parent rembourrage par rapport
$.fn.vAlign = function() {
return this.each(function() {
$(this).css('top', '50%').css('margin-top', -Math.ceil($(this).height()/2) + "px");
});
};
Voir en action - http://jsfiddle.net/vqbMU/2/
MISE à JOUR:
Une solution pure CSS pour les navigateurs supportant les transformations css (IE9 +) http://caniuse.com/#search=transform
.align-v {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Je crois que oui a été fait pour être spécifique aux programmeurs contrairement à Google :) – Sarfraz
Regardez cette réponse SO: http: // stackoverflow. com/questions/7206640/css-verticalement-align-div-quand-non-fixed-size-of-the-div-is-known –