Выравнивание по центру на абсолютно позиционированном элементе Div
Ответы 9
Ваша проблема может быть решена, если вы зададите div фиксированную ширину, а именно:
div#thing {
position: absolute;
top: 0px;
z-index: 2;
width:400px;
margin-left:-200px;
left:50%;
}
что, если пользователь вертикально прокрутил вниз, div появляется вверху страницы, а он должен отображаться в видимой области
Я показываю эскизы изображений с динамическим изменением размера в моем наложенном div, поэтому я не знаю ширины.
это только обходной путь, stackoverflow.com/questions/1776915/… кажется решением
Это неправильный ответ. Этот фрагмент не поддерживается другим типом мультимедиа.
Установите ширину и левое поле в процентах, чтобы сделать его отзывчивым. width: 80%; margin-left: -40%
Обратите внимание, что это работает, потому что вы перемещаете div в «начало» из центра с помощью 'Left: 50%;' а затем вы отрегулируете влево, используя margin-left, который составляет половину вашей фактической ширины. Я бы сказал, гений.
если вы используете фиксированную ширину, это лучшее решение.
Да:
div#thing { text-align:center; }
Это выровняет содержимое внутри div. Он не будет выравнивать div по центру страницы. Он также не будет выравнивать абсолютно позиционированный div каким-либо образом, кроме его содержимого, которое является частью потока документов.
div#thing
{
position: absolute;
width:400px;
right: 0;
left: 0;
margin: auto;
}
Как это работает? Не могли бы вы объяснить, почему ваш ответ верен?
Мне очень нравится этот метод в 99% случаев, вам не нужно иметь дело с отступами, границами и т. д. Я никогда не видел, чтобы это терпело неудачу, в следующий раз приведите пример, если он не удастся для вас.
В этом решении здорово то, что оно работает и с процентами, только не уверен, что оно кроссбраузерно.
Вау. Я не ожидал, что это сработает, но у меня это сработало как шарм
Добавьте bottom:0;, и вы сможете центрировать нижний колонтитул страницы ... именно то, что я искал, спасибо.
если вы удалите свойство position, right и left, элемент div будет в основном по центру. Дело в том, что вы не можете использовать margin: auto, если начинаете корректировать положение элемента. Но, читая вопрос, я не понимаю, зачем ему позиционировать элемент как абсолютный.
@dav: "[установка значения для левого / правого] определяет, насколько край поля (…) блока смещен до края (…) содержащего его блока». w3.org/TR/CSS2/visuren.html#position-props
Прелесть этого в том, что вам не нужно знать ширину.
Я согласен с тем, что это должен быть правильный ответ, маржа -200 пикселей кричит мне как взломать.
Это работает лучше, чем выбранный ответ, так как он гораздо более универсален.
Согласитесь, это намного лучше, но я использовал маржу: 0 auto 0 auto; хотя. Но хороший сол.
Это (лучший ответ)
Хитрость заключается в установке якорей left: 0; и right: 0;, тогда это может выглядеть как выравнивание horizontal-center (я искал что-то подобное для react-native и использовал компонент top: 0; bottom: 0;', I was able to stretch`, и сделал его похожим на выравнивание vertical-center с помощью justifyContent: 'center')
Если вам необходимо иметь относительную ширину (в процентах), вы можете обернуть свой div в абсолютное позиционирование:
div#wrapper {
position: absolute;
width: 100%;
text-align: center;
}
Помните, что для того, чтобы позиционировать элемент абсолютно, родительский элемент должен располагаться относительно.
У меня была такая же проблема, и мое ограничение заключалось в том, что у меня не может быть предопределенной ширины. Если ваш элемент не имеет фиксированной ширины, попробуйте это
div#thing
{
position: absolute;
top: 0px;
z-index: 2;
left:0;
right:0;
}
div#thing-body
{
text-align:center;
}
затем измените свой html, чтобы он выглядел так
<div id = "thing">
<div id = "thing-child">
<p>text text text with no fixed size, variable font</p>
</div>
</div>
Я знаю, что опаздываю на вечеринку, но я подумал, что дам ответ здесь для людей, которым нужно горизонтально расположить абсолютный элемент, когда вы не знаете его точную ширину.
Попробуй это:
// Horizontal example.
div#thing {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Тот же метод можно применить, когда вам может потребоваться вертикальное выравнивание, просто настроив свойства следующим образом:
// Vertical example.
div#thing {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Вааат. Это круто! Не могли бы вы объяснить, как это работает? Обновлено: немного поохотился, и похоже, что слева: 50% перемещает левое местоположение div в центр, который на самом деле не центр. Но translateX сдвигает его назад на 50% от ширина содержимого
Абсолютное позиционирование будет располагаться от верхнего левого угла элемента. Использование translate сдвинет его на сумму относительно его размера.
Майкл, просто хотел, чтобы вы знали, вы не опоздали на вечеринку ... и для тех, кто не знает: transform: translate (-50%, -50%); выполняет как вертикальное, так и горизонтальное центрирование с помощью 1 линии
Чтобы центрировать его как по вертикали, так и по горизонтали, сделайте следующее:
div#thing {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Или вы можете использовать относительные единицы, например
#thing {
position: absolute;
width: 50vw;
right: 25vw;
}
.contentBlock {
width: {define width}
width: 400px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Не знаю, почему я не подумал об этом, хотя мы все время используем одну и ту же технику для вертикального центрирования ... В любом случае, спасибо, вы сэкономили мне много времени.