J'ai le code suivant:

body {
  height: 100%;
}
section {
  height: 70%;
}
.first {
  height: 10%;
}
.second {
  height: 10%;
}
.third {
  height: 10%;
}
<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>

J'ai besoin que le contenu des classes first, second et third soit aligné verticalement au centre.

0
Surendra 24 janv. 2017 à 12:48

5 réponses

Meilleure réponse

Utilisation de Flex

body,html {
  height: 100%;
}
section {
  height: 70%;
  display:flex;
  align-items: center;
  justify-content: center;
  
}
.first {
  height: 10%;
  background:green;
}
.second {
  height: 10%;
  background:blue;
}
.third {
  height: 10%;
  background:orange;
}
<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section
0
Santosh Khalse 24 janv. 2017 à 10:42

Regarde ça

CSS EN LIGNE

<div class="section" style="text-align:center">...</div>

PURE CSS

.section {
    text-align:center;
}
-1
Feelsbadman 24 janv. 2017 à 10:04

L'ajout du CSS ci-dessous amènera le texte verticalement au milieu des divs

display: table-cell;
vertical-align: middle;

Pour un meilleur résultat, vous pouvez donner le style ci-dessous à la div externe.

display:table;
0
Anjana Shyamlal 24 janv. 2017 à 09:59

Si vous souhaitez utiliser css3 flexbox, vous pouvez faire comme ceci:

.main-container {
    height:calc(100vh);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.first,
.second,
.third {
  flex: 0 1 auto;
}
<section class="main-container">
  <div class="first">
    content goes here
  </div>
  <div class="second">
    content goes here
  </div>
  <div class="third">
    content goes here
  </div>
</section>
1
max li 24 janv. 2017 à 10:03

Le plus simple est d'utiliser flex.

N'oubliez pas que height: xx%; nécessite une valeur de hauteur connue sur le parent pour être calculée. Ici body{height:100%} est 100% de rien (donc pour les enfants) puisque html n'a pas de hauteur définie .

html,
body,
section{
  height: 100%;/* section inherits height value from body which inherits it from html */
  margin: 0;
}

section,
.first,
.second,
.third {
  margin:0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width:100%;
}
section {
}
.first {
  height: 10%;
}
.second {

  flex: 1;
  background:gray
}
.third {
  height: 10%;
}
<body>
  <section class="main-container">
    <div class="first">
      // content goes here
    </div>
    <div class="second">
      // content goes here
    </div>
    <div class="third">
      // content goes here
    </div>
  </section>
</body>

ou vouliez-vous dire centrer le contenu du site au milieu, ce que flex fait facilement aussi (mêmes règles CSS mais aucune imbrication flex nécessaire ici) :

html,
body,
section{
  height: 100%;
  margin: 0;
}

section
{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width:100%;
  background:gray
}
section {
}
.first {
  height: 10%;
}
.second {
  height: 10%;
  background:lightgray
}
.third {
  height: 10%;
}
<body>
  <section class="main-container">
    <div class="first">
      // content goes here
    </div>
    <div class="second">
      // content goes here
    </div>
    <div class="third">
      // content goes here
    </div>
  </section>
</body>
0
G-Cyrillus 24 janv. 2017 à 10:07