Центрирование контента по горизонтали и вертикали

Проблема: необходимо отцетрировать бокс с контентом по горизонтали и вертикали.
Решение:

1. присваиваем боксу, который необходимо поместить в центр экрана class="centered".
2. в css прописываем:
   PLAIN TEXT
   CSS:

   1. .centered {
   2. position: absolute;
   3. top: 50%;
   4. left: 50%; }

   
   Сейчас мы установили верхний левый угол бокса в центр страницы. На экране видим примерно следующее:
   

3. Смещаем бокс на половину его ширины влево и на половину высоты вверх при помощи отрицательного margin:
   PLAIN TEXT
   CSS:

   1. .centered {
   2. position: absolute;
   3. top: 50%;
   4. left: 50%;
   5. margin-top: -50px;
   6. margin-left: -100px; }

   В итоге получаем результат: