Centrage vertical (position)

by ydelmas

HTML

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

CSS

/* centrage */
.conteneur {
  position: relative;
}
.contenu {
  position: absolute; top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* aspect */
.conteneur {
  background-color: rgba(255,0,0,0.2);
  width: 300px;
  height: 400px;
  margin: 100px;
}
.contenu {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  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=);
}