Выравнять div по центру (работающий вариант)

Выравниваем красный блок div по центру относительно синего блока.

Стили (CSS):

<style type="text/css">
.align_center
{
position: relative;
width: 100%;
}
.align_center:after
{
content: '';
display: block;
clear: both;
}
.align_center_to_left
{
position: relative;
right: 50%;
float: right;
}
.align_center_to_right
{
position: relative;
z-index: 1;
right: -50%;
}
</style>

Код (html):

<div class="align_center" style="border: 3px solid blue; color: blue;">
Выравниваем относительно этого блока.
<div class="align_center_to_left">
<div class="align_center_to_right" style="margin: 1em 0; border: 3px solid red; color: red;">
Ширина блока зависит от размера надписи.
</div>
</div>
</div>