CSS Fixed width height div Inner element vertically centered method

Application case

The case is that an outer div, aspect, is fixed, but the contents are not fixed. Many friends of the practice is the head plus a padding or margin, so that the content appears to be centered, but if the content changes, so that the head of the fixed padding or margin, always unchanged. Cause the vertical direction will not center!

We know that if the following Div

<div class="outer"><div class="inner">haorooms内部内容</div></div>

The style is like this

.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}

Vertical-align:middle not work, a lot of friends in the. Inner above, and I said above, add margin and so on! Is there a better solution for this situation?

Workaround

Idea: Add a csshack, set csshack line-height equals the height of the outer div, you can use Vertical-align:middle!

The div is as follows:

<div class="outer"> <div class="inner">haorooms内部内容</div><div class="v">cssHack</div></div>

The styles are as follows:

* {Margin: 0;Padding: 0;}.Outer{Background-Color: #ccc;Font-Size: 24px;Height: 350px;Text-Align:Center;Overflow:Hidden;Width: 280px;}.Outer.Inner,.Outer.V{Display: Inline-Block;Zoom: 1;*Display: Inline; /* For triggering support IE67 Inline-block */}.Outer.Inner{Line-Height: 1.8;Padding: 0 4px 0 5px;Vertical-Align: Middle; Width: 262px;}.. V { Line-height: 350px; Text- indent:-< span class= "lit" >9999px; width : 1px;               /span>                

This enables the vertical centering of the div inside!

CSS Fixed width height div Inner element vertically centered method