Question

EDIT: I apologize if this has been asked before or is a well-known techinque. I didn’t know what this would be called and hence I was unable to search for it.

In my HTML document, I vertically center something as follows:

<div style='position:  absolute; margin:  auto; top:  0; bottom:  0; height:  500px'>
<!-- CONTENT HERE -->
</div>

This works great, the only problem is, the code isn’t quite reusable because it depends on the particular height of the block. What I would like to do is something like this:

<div class='vcenter(500px)'>
<!-- CONTENT HERE -->
</div>

.vcenter(height)
{
    position:  absolute;
    margin:  auto;
    top:  0;
    bottom:  0;
    height:  height;
}

If I could implement something like this, then I would not have to duplicate code every time I wanted to vertically center something. Does CSS have a way of implementing this?

Answer 1

You could use a css expression, but dont. It’s badly supported by browsers and bad practice.

I would recommend using a css generating tool:
http://lesscss.org/ or http://compass-style.org/