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

Эта статья была написана в 2010 году и остается одной из наших самых популярных публикаций. Если вы хотите больше узнать о методах CSS, вы можете найти эту недавнюю статью о Селекторах Уровня 4 в CSS, которая представляет большой интерес.

Центрирование абсолютно позиционированного элемента — это проблема CSS, которая возникает время от времени. Решение кажется очевидным, как только я это сделаю, но я все еще пытаюсь найти решение проблемы каждые несколько месяцев.

Горизонтальное центрирование статического элемента в CSS обычно обрабатывается путем установки для левого и правого полей значения auto

 .myelement {
  margin: 0 auto;
}

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

В следующем примере относительный красный квадрат имеет width Верхний левый угол абсолютно позиционированного синего квадрата расположен на 30 пикселей в поперечнике и на 10 пикселей вниз:

 .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;
}

 .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;
}