Vertical align a text to a center of a div

Question

I want to align a text to the middle of a div. I have the following:

<div class="col-md-6 article-headline-quote-container">
                <div class="article-headline-quote">Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah</div>
            </div>

I read some other posts and I modified my css, so now it is:

.article-headline-quote-container {
   display: table-cell;
   vertical-align: middle;
}

.article-headline-quote {
  font-size: 36px;
  display: block;
}

But the text is not aligned in the middle of the div. Any help? What I am doing wrong?

Answer 1

Your HTML

<div class="col-md-6 article-headline-quote-container">
                <div class="article-headline-quote">Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah</div>
            </div>

Use this CSS

.article-headline-quote-container {
       display: table;
       text-align: center; /* for centering horizontally */
       height:110px; background:#ff0;
    /* for testing only */
    height: 300px;
    }

    .article-headline-quote {
      font-size: 36px;
      display: table-cell;
       vertical-align: middle;
    }

Here is a fiddle - http://jsfiddle.net/4Dsq9/1/ for you

Answer 2

Use this:

<div class="col-md-6 article-headline-quote-container">
    <div class="middle"></div>
    <div class="article-headline-quote">Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah</div>
</div>

And your css like this:

.article-headline-quote-container{position: relative}
.middle, .article-headline-quote{display: inline-block; vertical-align: middle;position: relative; max-width: 99%}
.middle{height: 99%;}

Demo: http://jsfiddle.net/masqueradecircus/5KrRH/