How to vertically center div in fluid container?

Question

I would like to be able to vertically center a div containing meta data such as Title and Author within a container that has a fluid width. In the example below, I would like the .meta div to be vertically centered within the article which is fluid width.

I tried following this article ( http://css-tricks.com/centering-in-the-unknown/ ) but it doesn't work.

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 (using LESS)

.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

Tried your Less but got an error in codepen.io so could not debug.

You could try something simple like this:

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

Check it working here

You might find this article useful as well: http://logconsole.com/vertical-align-center-image/

It's about vertically centring image, but in most cases you could just change image with a div.

Answer 2

Try this on what you want to be centered. I altered @domkoscielak's code so that it work.

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