Center DIV content Fluid Vertical and Horizontal

Question

This is the example I have:

Line height does not apply to fluid divs.

Answer 1

Ran into a similar situation not too long ago, did a search and found an article about absolute centering from css-tricks, here is the article and an accompanying fiddle to test it out.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

HTML

    

        
Some text
        
But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"
    





    

        
Some text
        
But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"
    





    

        
Some text
        
But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"
    

Demo

http://jsfiddle.net/andresilich/YqKMH/