Comment centrer un élément de section html5? verticalement

Question

voici en gros ma structure html la section contenu est la partie que je veux centrée entre l'en-tête et le pied de page de sorte que sur toutes les résolutions c'est au milieu. J'ai essayé d'employer la méthode de table où vous mettez un div autour de la section avec l'affichage: table et puis placez la section de contenu comme affichage: table-cellule; vertical-align: milieu; mais il semble affecter le positionnement des divs/sections dans le contenu et positionne la section en haut à gauche de l'écran sur l'élément d'en-tête qui a la position: absolute ;.

<header> 
</header> 
<section id="container"> 
<section id="content"> 
</section> 
</section> 
<footer> 
</footer> 

Answer 1

Supposons ceci:

div {width: 300px; height: 200px;} 

vous pouvez ajouter:

div {position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -150px;} 

Il est bon de mettre un "wrap" autour de tous les éléments à l'intérieur de la balise body. Laissez-moi savoir comment cela fonctionne pour vous.

Answer 2

Pour la première colonne;

float: left; 
position: absolute; 
left: 50%; 

pour la seconde et ainsi de suite;

float: left; 
position: absolute; 
left: 70%; 

Mais cette approche est inefficace, vous pouvez utiliser seulement float:left; à l'intérieur divs.