Как выровнять по центру слой с абсолютным позиционированием

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

Горизонтальное центрирование элемента с помощью CSS выглядит довольно просто — нужно задать элементу отступы слева и справа как auto:

  1. #el {
  2. 	margin: 0 auto;
  3. }

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

  1. #outer{
  2. 	position: relative;
  3. 	width: 40%;
  4. 	height: 120px;
  5. 	margin: 20px auto;
  6. 	border: 2px solid #c00;
  7. }
  8. #inner{
  9. 	position: absolute;
  10. 	width: 100px;
  11. 	height: 100px;
  12. 	top: 10px;
  13. 	left: 30px;
  14. 	background-color: #00c;
  15. }
 

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

  1. #outer{
  2. 	position: relative;
  3. 	width: 40%;
  4. 	height: 120px;
  5. 	margin: 20px auto;
  6. 	border: 2px solid #c00;
  7. }
  8. #inner{
  9. 	position: absolute;
  10. 	height: 100px;
  11. 	left: 30px;
  12. 	top: 10px;
  13. 	right: 30px;
  14. 	background-color: #00c;
  15. }
 

Такой способ не сработает в интернет эксплорере версии 6. Другого я от него и не ожидал :)
Чтобы отцентрировать абсолютно спозиционированный слой с фиксированной шириной выполним следующие простые шаги:

  1. Зададим позицию слева 50%, это сдвинет синий квадрат так, что его левая граница будет точно по центру
  2. Теперь укажем слою отрицательный отступ слева,равный половине его ширины
  1. #outer{
  2. 	position: relative;
  3. 	width: 40%;
  4. 	height: 120px;
  5. 	margin: 20px auto;
  6. 	border: 2px solid #c00;
  7. }
  8. #inner{
  9. 	position: absolute;
  10. 	width: 100px;
  11. 	height: 100px;
  12. 	top: 10px;
  13. 	left: 50%;
  14. 	margin-left: -50px;
  15. 	background-color: #00c;
  16. }
 

Синий квадрат в центре. Цель достигнута!

Запись опубликована в рубрике HTML & CSS с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">