Centrage vertical (table)

by ydelmas

HTML

<div class="conteneur">
  <div class="intermediaire">
    <div class="contenu">
      <p>Lorem ipsum</p>
      <p>dolor sit amet</p>
    </div>
  </div>
</div>

CSS

/* centrage */
.conteneur {
  display: table;
}
.intermediaire {
  display: table-cell;
  vertical-align: middle;
}
.contenu {
  border: 1px solid transparent;
  /* ou du padding, pour éviter que les marges dépassent */
}

/* aspect */
.conteneur {
  background-color: rgba(255,0,0,0.2);
  width: 300px;
  height: 400px;
  margin: 100px;
}
.contenu {
  width: 200px;
  height: 200px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAUAQMAAAB8nGuwAAAAAXNSR0IArs4c6QAAAAZQTFRFttCamZmZ6W6u8gAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2wseCyELZCN0ewAAABpJREFUGNNjEEQFDEqogMEFFTB0oAKGEa4fACB9SrYjovZxAAAAAElFTkSuQmCC);
}
body {
  margin: 0; padding: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAAAXNSR0IArs4c6QAAAAxQTFRFmZmZzMzM8/Pz////K8NqUwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sCFwoUIWxzONcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAYklEQVRIx+2SsQ2AAAzD+gFf8gLnsEIWXuAOTkFFAfZ0oCuJqiyRpQ4O8sAqagnyBES9y1cGJYMG0/ttrBLAzEtUPstGisoGw5Jhg+n9NlUJe2AP7IE9sAf2wB781YM9B303qS2iR7ZkFX8AAAAASUVORK5CYII=);
}