Une div en bas d'une autre div et centrée horizontalement

Bonjour,

Est-ce que quelqu'un saurait centrer horizontalement un bloc dans un autre bloc tout en plaçant le deuxième bloc en bas du premier?

Mon code actuel :

<div style='border:1px solid blue;width:400px;height:400px;'>
	bloc 1
	<div style='border:1px solid green;width:200px;height:100px;margin-left:auto;margin-right:auto;vertical-align:absbottom;'>bloc 2</div>
</div>

Merci

Bonjour,

Connais-tu la hauteur exacte de tes blocs ou bien est-ce juste pour l'exemple ? Si oui, assez simple en positionnant l'élément. Si non, utilise plutôt min-height que height.
Peux-tu ajouter un élément autour de "bloc 1" ou bien est-ce une contrainte forte de ton code HTML ? Pas facile de faire sortir le bloc à la bordure verte de son parent à la bordure bleue sans écraser ce qui suit... Ce serait déjà moins compliqué si un élément "bloc 1" frère de bloc 2 portait la bordure et pas le parent de bloc 2...
Codepen avec ton code : http://codepen.io/anon/pen/uLBvl

Bonjour,

Quelque chose comme ça : http://codepen.io/anon/pen/JefKg ?

Si tu as une hauteur fixe pour tes deux elements, alors tu peut faire tomber le second element a une hauteur determiné. exemple en reprenant ton code et en ajoutant 2 id pour simplifié l'explication/demo: http://codepen.io/anon/pen/wvkcA

<div id="un"style='border:1px solid blue;width:400px;height:400px;'>
	bloc 1
	<div id="deux" style='border:1px solid green;width:200px;height:100px;margin-left:auto;margin-right:auto;vertical-align:absbottom;'>bloc 2</div>
</div>

et pour le CSS :

#un:before {/* #un fait 400px de H et #deux 100px de H . 400 - 100 = 300px */
  content:'';
  float:left;
  height:300px;
}
#deux {
  clear:left;/* #deux tombe au dessous du pseudo element flottant de 0px de L mais de 300px de H */
}

Modifié par gc-nomade (14 Jul 2014 - 01:18)

Merci pour vos messages.

Excusez-moi, je ne me suis pas suffisamment bien exprimé, les dimensions ne sont pas connues, j'ai écris ce code après avoir tenté de simplifier au maximum mon problème.

C'est pour la page http://www.cmath.fr/index2.php.

Je souhaiterais mettre mon bloc "pied de page" (encadré en bleu) à l'intérieur et centré horizontalement en bas du bloc "section" (bloc blanc comme neige et comme quelques uns de mes cheveux), chose qui paraissait très simple en théorie et qui est devenue prise de tête....

Je précise qu'en positionnement absolu j'arrive à le mettre en bas du bloc section mais pas à le centrer horizontalement, et en positionnement normal j'arrive à le centrer horizontalement mais pas à le mettre en bas.

footer {
vertical-align: bottom;
margin-top: 100%;
display: block;
}