We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.
The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle Show archive.org snapshot ).
The children need to be block elements.
The HTML
<div class="parent">
<div class="child"></div>
<div class="child"></div>
...
</div>
The CSS
.parent {
display: table-cell;
vertical-align: middle;
width: 500px;
height: 300px;
}
.child {}
When .child elements are inline elements, add display: block; to their style.
When you need to specify the width of .child elements, center them with margin: auto;.
This works in IE8+, Firefox 15.0+, Chrome 22.0+, Safari 5.1+ and Opera 12.0+.
Posted by Dominik Schöler to makandra dev (2012-11-10 11:45)