Оцентровка абсолютного элемента с помощью CSS

Время от времени возникает задача отцентровать абсолютно спозиционированный элемент. Предлагаемое решение кажется очевидным после его реализации. Горизонтальное расположение по центру статического элемента с помощью 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; } 

А как отцентровать блок с заданными размерами? Ответ может быть несколько необычным: Для начала зададим значение отступа от левой границы 50%. Это передвинет левый край синего квадрата в центр. Так как теперь квадрат сдвинут сильно вправо, зададим отрицательное значение левого внешнего отступа, равное половине ширины квадрата. В этом примере нужно задать значение -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; } 

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