Как центрировать элемент с "position: absolute"

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

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

Этот подход позволяет центрировать элемент по горизонтали. Свойства margin-left: auto и margin-right: auto автоматически распределяют оставшееся пространство с обеих сторон элемента, а position: absolute позволяет ему позиционироваться в пределах родительского элемента, что делает центрирование более контролируемым. Убедитесь, что родительский элемент имеет заданную ширину.

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

В вашем примере вы используете следующий код:

ul#slideshow li {
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

Чтобы корректно центрировать элемент, нужно изменить значение margin-left на отрицательное значение, равное половине ширины элемента, который вы хотите центрировать. Например, если ширина вашего элемента составляет 40 пикселей, код будет выглядеть следующим образом:

ul#slideshow li {
    position: absolute;
    left: 50%;
    margin-left: -20px; /* здесь -20px – это половина ширины элемента */
}

Таким образом, вы центруете элемент относительно родительского контейнера, указывая его положение в 50% слева и корректируя с помощью отрицательного значения margin-left. Если ширина вашего элемента изменится, не забудьте пересчитать и обновить значение margin-left, чтобы сохранить центрирование.

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

ul#slideshow li {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Этот способ более универсален и избавляет от необходимости вручную вычислять margin-left.

Чтобы центрировать элемент как по вертикали, так и по горизонтали с использованием CSS, можно применить следующее решение. Убедитесь, что у элемента установлены значения ширины и высоты. Используйте позиционирование absolute, и задайте нулевые значения для top, bottom, left и right, а также margin: auto. Пример кода:

.container {
    position: relative; /* Для создания контекста позиционирования */
    width: 100%; /* Задайте нужную ширину контейнера */
    height: 100vh; /* Задайте высоту контейнера, например, 100% от высоты экрана */
}

.centered-div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; /* Центрует элемент */
    width: 300px; /* Задайте необходимую ширину */
    height: 200px; /* Задайте необходимую высоту */
}

Таким образом, элемент с классом centered-div будет выровнен по центру как по вертикали, так и по горизонтали внутри контейнера .container. Убедитесь, что задаёте размеры для элемента, чтобы он мог корректно отобразиться.

Если вы хотите центрировать абсолютно позиционированный элемент, вот пример кода:

#div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 300px; /* Укажите значение */
    height: 500px; /* Укажите значение */
    margin: auto;
}

Если вам нужно центрировать контейнер слева направо, но не сверху вниз, используйте следующий код:

#div {
    position: absolute;
    left: 0;
    right: 0;
    width: 300px; /* Укажите значение */
    height: 500px; /* Укажите значение */
    margin: auto;
}

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

#div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px; /* Укажите значение */
    height: 500px; /* Укажите значение */
    margin: auto;
}

Обновление на 15 декабря 2015 года

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

.absolute-element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 50%; /* Вы можете указать любые значения для ширины */ 
}

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

Обновление на 23 апреля 2021 года

Этот ответ не касается вопроса ОП о абсолютном позиционировании, но если вам нужна альтернативное решение, существует такая штука как flexbox. Вот пример:

#parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

Что происходит, так это то, что контейнер преобразуется в flex, и для центрирования дочерних элементов по горизонтали используется justify-content: center, а по вертикали — align-items: center. Эта технология поддерживается современными браузерами, так что ее безопасно использовать.

Тем не менее, обязательно ознакомьтесь с тем, как работает flexbox:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Поддерживаемые браузеры для flexbox:

https://caniuse.com/flexbox

Простой трюк с CSS, просто добавьте:

width: 100%;
text-align: center;

Это будет работать как для изображений, так и для текста.