Время от времени возникает задача отцентровать абсолютно спозиционированный элемент. Предлагаемое решение кажется очевидным после его реализации. Горизонтальное расположение по центру статического элемента с помощью CSS обычно осуществляется с помощью установки автоматического значения левого и правого внешнего отступов, например:

#myelement{
  margin: 0 auto;
} 

Но этот способ не сработает, если у элемента абсолютное позиционирование. В этом случае его расположение определяется относительно непосредственного родителя, у которого абсолютное, относительное или фиксированное позиционирование.

В следующем примере у относительно спозиционированного красного прямоугольника ширина задана как 40% доступного пространства. Значение отступа от верхней границы у абсолютно спозиционированного синего квадрата составляет 10px, а значение отступа от левой границы — 30px:

#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 30px;
  background-color: #00c;
}

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

#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  height: 100px;
  left: 30px;
  top: 10px;
  right: 30px;
  background-color: #00c;
}

А как отцентровать блок с заданными размерами? Ответ может быть несколько необычным:

1. Для начала зададим значение отступа от левой границы 50%. Это передвинет левый край синего квадрата в центр.
2. Так как теперь квадрат сдвинут сильно вправо, зададим отрицательное значение левого внешнего отступа, равное половине ширины квадрата. В этом примере нужно задать значение -50px, чтобы квадрат вернулся на место.

#outer{
  position: relative;
  width: 40%;
  height: 120px;
  margin: 20px auto;
  border: 2px solid #c00;
}
#inner{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: 50%;
  margin-left: -50px;
  background-color: #00c;
}

Синий квадрат будет располагаться по центру не зависимо от изменения ширины внешнего элемента.

Автор урока Craig Buckler

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

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

• Создание галереи изображений с увеличением с использованием только CSS3
• Создание раздвигающейся галереи изображений с использованием только CSS3
• Создание ярлыков с использованием CSS для добавления пометок содержимому