Есть ли способ позиционировать что-то на основе центра экрана (по горизонтали) с помощью CSS?

Question

Мне интересно, есть ли более простой способ сделать это:

1. Позиционировать что-нибудь по центру экрана (легко).
2. Сместить его положение от центра.

Обычно я достигаю этого, создавая <div> с удвоенной шириной от величины, на которую я хочу сместить, устанавливаю ее на margin: auto; и затем помещаю желаемый элемент в это плавающее положение либо влево, либо вправо.Это прекрасно работает, я просто подумал, что может быть более короткий путь.

Например, я мог бы захотеть разместить <div> в 80px слева от центра экрана, например:

Answer 1

Вы можете сделать что-то вроде этого:

body { position: relative }

div {
  width: 300px;
  height: 250px;

  /* Origins from the screen center */
  position: absolute;
  top: 50%;
  left: 50%;

  margin-top: -125px; /* height / 2 */
  margin-left: -230px; /* (width / 2) - 80 */
  /* The margin left would be -150px but you want it to move 80 pixels to left */
}

Вот онлайн пример: http://jsfiddle.net/B4rDJ/2/ (спасибо, Пурму!)