Centering vertically Text in css

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...

  
This small paragraph...

Index of demos and downloads

• accordion.html


• animate.html


• animatestop.html


• autocompleter.html


• carousel.html


• cart.html


• dependencies.html


• download.html


• drag.html


• drag_drop_tree.html


• drag_vr.html


• drop.html


• expander.html


• fisheye.html


• ifx.html


• imagebox.html


• images/


• menu.html


• resize.html


• resize_textarea.html


• scrollbar.html


• select.html


• slider.html


• slider_colorpicker.html


• slider_minmax.html


• slider_resize.html


• slideshow.html


• sort.html


• sort_floats.html


• sort_lists.html


• sort_tabs.html


• tooltip.html


• ttabs.html


• windows.html

Preload animated gif image

preload animation gif image download