Ноя 15

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

HTML Комментировать

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

  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; }

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

Похожие публикации

Оставить ответ