Как выровнять css position absolute по центру

Привет. Расскажу о том, как в вёрстке выровнять блок с абсолютным позиционированием по центру, чтобы он стоял ровно по центру экрана.
Для этого нам нужен сам блок, скажем, размером 600×400 пикселей.
Сам код выглядит так:

<div id='centerred_block'>Я нахожусь ровно по центру экрана</div>

#centerred_block {
color: #000;
background: #FFF;
border: 1px solid #000;
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
}

Самое важное выделено в css. Суть такая:

1. Определяете ширину и высоту блока. В нашем случае, width: 600px; height: 400px;
2. Позиционируете блок position:absolute, установив его на уровень top:50%; left: 50%
3. Выравниваете блок по горизонтали, сдвинув его влево на половину ширины блока. В нашем случае, margin-left: -300px;
4. Выравниваете блок по вертикали, сдвинув его вверх на половину высоты блока. В нашем случае, margin-top: -200px;

На результат можно глянуть на JsFiddle