Comment centrer verticalement div dans un conteneur de fluide?

Question

Je voudrais être en mesure de centrer verticalement une div contenant des méta-données telles que Title et Author dans un conteneur qui a une largeur de fluide. Dans l'exemple ci-dessous, je voudrais que le .meta div soit centré verticalement dans l'article qui est la largeur du fluide.

J'ai essayé de suivre cet article (http://css-tricks.com/centering-in-the-unknown/) mais cela ne fonctionne pas.

HTML

<div class="container"> 
    <h3>Test</h3> 
    <article> 
     <div class="meta"> 
      <div class="title"></div> 
      <div class="author"></div> 
        <img src="" /> 
     </div> 
    </article> 
</div> 

CSS (en utilisant moins d')

.container { 
    h3 { 
     margin: -5px 0 0 0; 
     padding: 32px 0px 16px 0; 
     .freight-sans-pro; 
     font-size: 1.375em; 
     line-height: 1em; 
     font-weight: 200; 
    } 
    article { 
     max-height: 375px; 
      overflow: hidden; 
     position: relative; 
     z-index: 900; 
     margin-bottom: 2px; 
     background-color: @color-black; 
     line-height: 0em; 
     a { 
      max-height: 375px; 
      display: block; 
      img { opacity: .5; .opacity-transition; } 
     } 
     .meta { 
      width: 100%; 
      position: absolute; 
      bottom: 40%; 
      z-index: 500; 
      padding: 0px 10%; 
      color: @color-white; 
      font-size: 20px; 
      text-align: center; 
      .title { 
       margin: 0; 
       font-size: 2em; 
       line-height: 1em; 
       font-weight: 700; 
       text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7); 
       padding-bottom: 8px; 
       text-decoration: none; 
       display: block; 
      } 
      .author { 
       margin: 0; 
       font-size: .8em; 
       line-height: .75em; 
       font-style: italic; 
       text-transform: uppercase; 
       text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7); 
       text-decoration: none; 
       display: block; 
      } 
     } 
    } 
} 

Answer 1

votre Essayé moins mais nous avons eu une erreur dans codepen.io donc ne pouvait pas debug.

Vous pouvez essayer quelque chose de simple comme ceci:

.container { 
    border: 2px solid blue; 
    width: 180px; 
    height: 120px; 
    overflow: hidden; 
    display: table-cell; 
    vertical-align: middle; 
} 

Vérifier fonctionner here

Vous trouverez peut-être cet article utile ainsi: http://logconsole.com/vertical-align-center-image/

Il est à propos de l'image de centrage vertical, mais dans la plupart cas, vous pouvez simplement changer l'image avec un div.

Answer 2

Essayez ceci sur ce que vous voulez centrer. J'ai modifié le code de @ domkoscielak pour que cela fonctionne.

.meta { 
    width: 180px; 
    height: 120px; 
    top: 50%; 
    margin-top: -60px; /*half of height*/ 
    position: absolute; 
}