Position by center point, rather than top-left point
If the element must be absolutely positioned (so, margin: 0 auto;
is of no use for centering), and scripting is out of the question, you could achieve this with CSS3 transforms.
.centered-block {
width: 100px;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
}
See this fiddle for some examples. The important parts: left: 50%;
pushes block halfway across its parent (so its left side is on the 50% mark, as you mentioned). transform: translate(-50%, 0);
pulls the block half it's own width back along the x-axis (ie. to the left), which will place it right in the center of the parent.
Here's one way to center a text element in the middle of the container (using a header as an example
CSS:
.header {
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
It centers by a middle anchor point.