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.