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.