CSS: Center block, but align contents to the left

I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.

Examples serve best

On this page :

the ascii art should be centered (as it appears) but it should line up and look like "YAML".

Or this :

the error message should all line up as it does in a console.

Solution

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}