Question

if the block is text,that will be easy.but the block is image en……

Answer 1

There’s not a perfect way to do this without using tables, since the vertical-align CSS property unfortunately does different thing with inline elements and table elements (see http://phrogz.net/css/vertical-align/index.html).

Several solutions, with specific pro’s and con’s discussed, can be found here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Of them, one of the better solutions is the third method presented:

insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id="floater">
<div id="content">
    <img src="my-image.png"/>
</div>
</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#content    {clear:both; height:240px; position:relative;}