Мы задались вопросом, какими способами можно разместить изображение, например, логотип на странице заглушки, ровно по центру веб-страницы и по вертикали, и по горизонтали. Для начала зададим изображению класс .centered (расположенный по центру) и зададим стили для этого класса:

.centered {
  position: fixed; /* или absolute */
  top: 50%;
  left: 50%;
}

Но эта запись не сработает нужным нам образом. Вместо этого левый верхний угол, а не центр изображения, попадет точно в центр страницы:

Окно браузера
Лево: 50%
Право: 50%
Объект, который нужно разместить по центру 

Чтобы разместить изображение точно по центру, нужно просто применить отрицательный верхний внешний отступ, равный половине высоты изображения, и отрицательный левый внешний отступ, равный половине ширины изобажения. Для этого примера нужный код CSS будет выглядеть примерно так:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

И получаем нужный результат:

Окно браузера
Лево: 50%
Внешний левый отступ: -100px
Право: 50%
Внешний правый отступ: -50px
Объект, который нужно разместить по центру

Этот способ отлично работает, если известен размер того, что нужно расположить по центру. Но если размер неизыестен или он, предположительно, может измениться, лучше использовать следующий способ:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* сюда можно добавить свойства с нужными приставками производителей, если необходимо поддерживать очень старые версии браузеров */
  transform: translate(-50%, -50%);
}

Значение функции передвижения для свойства трансформации основывается на размере элемента, так что расположение по центру отлично сработает.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Использование фона у тега body
• Использование цветовых схем CSS
• Создание многострочного градиентного фона для текста