At first glance it may seem that the solution of the problem posed in the title is trivial: set the CSS-attribute vertical-align:middle - and this is it. But it's not that simple. Principle of layout elements traditionally based on scaling by width, and content stretches or shrinks vertically in accordance with new width. vertical-align is useful for centering contents of table cells, as well as of DIV blocks having the display:table-cell attribute. The expected behavior of content vertical centering can also be achieved for elements of the page normal flow - blocks with the attribute display:inline-block. In all other cases this approach does not apply, as most modern browsers simply uses vertical-align attribute to be inherited by the child inline elements of the block. It will require a different method, the description of which is the focus of this article.

Just make a reservation: the use of this technique involves two assumptions:

• You can specify a fixed height of the inner block.
• You can assign absolute positioning to the inner block. Typically, this is not a problem, because the container can remain in the normal flow.

If these conditions are met, do the following:

1. In the style of the container set the position attribute as relative or absolute.
2. Set a fixed height for the child block.
3. Set position:absolute and top:50%, in the style of child block, thus matching its upper limit with the middle of the parent block.
4. Specify the attribute margin-top of child block with the value equal to half of its height. This will move the child block up to match its middle with the middle of the container.

Example:

<div style="position: relative;">
   Container
  <div style="position:absolute; top:50%; height:8em; margin-top:-4em;">
    Vertically centered child block
  </div>
</div>

Here's how it looks in a browser:

An example of the practical use of this method while inscribing an image into container can be found in the next article.