Example
If the size of your content is fixed, you can use absolute positioning to 50% with margin that reduces half of your content's width and height:
HTML
<div class="center">
Center vertically and horizontally
</div>
CSS
.center {
position: absolute;
background: #ccc;
left: 50%;
width: 150px;
margin-left: -75px; /* width * -0.5 */
top: 50%;
height: 200px;
margin-top: -100px; /* height * -0.5 */
}
Horizontal centering with only fixed width
You can center the element horizontally even if you don't know the height of the content:
HTML
<div class="center">
Center only horizontally
</div>
CSS
.center {
position: absolute;
background: #ccc;
left: 50%;
width: 150px;
margin-left: -75px; /* width * -0.5 */
}
Vertical centering with fixed height
You can center the element vertically if you know the element's height:
HTML
<div class="center">
Center only vertically
</div>
CSS
.center {
position: absolute;
background: #ccc;
top: 50%;
height: 200px;
margin-top: -100px; /* width * -0.5 */
}
