CSS : Alignement vertical

Question

Comment aligner verticalement sans utiliser display table/table-cell ou position absolute ?

#parent {
  border: 1px solid red;
  height: 100vh;
}

.child {
  border: 1px solid blue;
}

<div id="parent">
  <div class="child">
    <p>I want to be vertical aligned</p>
  </div>
</div>

Answer 1

Vous pouvez utiliser comme ça je pense

position: fixed; top: 50%;

Answer 2

Si la compatibilité des navigateurs ne vous dérange pas, j'irais avec flex - voir les réponses de @rblarsen, @Satheesh Kumars.

mais si vous avez besoin d'étendre le support des navigateurs, voici une solution plus complexe mais plutôt solide : testé IE9+ FF Chrome et d'autres navigateurs majeurs...

regardez ce violon : https://jsfiddle.net/kLLz0nm2/

HTML

<div class="wrapper">
   <div class="content">Middle aligned</div>
   <div class="middle"></div>
</div>

CSS

.wrapper{
   width : 100%;
   height : 100%;
   text-align: center;
}

.content{
   display: inline-block;
   vertical-align: middle;
}

.middle{
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

P.S - ce qui précède translate bien qu'assez simple, peut parfois causer des problèmes de mauvais rendu, consultez :