Удивительно (или нет), инструмент vertical-align на самом деле лучше всего подходит для этой работы. Лучше всего, Javascript не требуется.
В следующем примере я размещаю класс outer в середине тела, а класс inner - в середине класса outer.
Предварительный просмотр: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Вертикальное выравнивание работает путем выравнивания центров элементов, которые находятся рядом друг с другом. Применение вертикального выравнивания к одному элементу абсолютно ничего не делает. Если вы добавите второй элемент, который не имеет ширины, но имеет высоту контейнера, ваш единственный элемент будет перемещаться вертикально в центр с этим элементом без ширины, таким образом, вертикально центрируя его. Единственным требованием является то, что вы устанавливаете оба элемента как inline (или inline-block) и устанавливаете для их атрибута vertical-align значение vertical-align: middle.
Примечание. В приведенном ниже коде вы можете заметить, что мой тег <span> и тег <div> соприкасаются. Поскольку оба они являются встроенными элементами, пробел на самом деле добавит пробел между элементом no-width и вашим div, поэтому не забудьте его пропустить.