Как сосредоточить абсолютно позиционированное содержимое неизвестной ширины?

Прежде чем кто-нибудь спросит меня, почему, черт возьми, я хотел бы это сделать, позвольте мне прийти прямо и рассказать вам. Таким образом, один из вас умный взгляд может сказать мне гораздо лучший способ...

Я создаю зрителя для картин, которые должны растягиваться, чтобы заполнить страницу, а точнее 90% высоты экрана. Я хочу увязать картины друг с другом и хочу центрировать каждую из них в середине экрана.

Чтобы увядать картины друг с другом, мне нужно установить их "абсолютное", чтобы они не укладывались. Здесь, где беда. С тех пор, как я установил их в абсолютный, каждый метод, который я использую для центрирования содержащего div, не работал.

Часть проблемы заключается в том, что я не устанавливаю ширину для картин, так как хочу, чтобы они динамически вели себя, чтобы заполнить 90% экрана пользователя.

Я нашел сотни методов для центрирования абсолютного контента и считаю, что мне может потребоваться сжать упаковку содержащего div. Однако я пока не добился успеха.

HTML -

<div id="viewer_div">
    <img src="" id="first" />
    <img id="second" class="hidden"/>
</div>

Таблица стилей

#viewer_div {
        width:1264px;
}


img {
    height:90%;
    display:block;
    margin-left: auto;
    margin-right:auto;
}

Приведенное выше дает мне желаемый эффект, но не позволяет мне позиционировать изображения абсолютными. Может ли кто-нибудь предложить способ центрирования изображений, но также позволяет мне исчезать один над другим?

Ответ 1

Для вычисления ширины и перемещения используйте JavaScript,

используйте CSS-хак, чтобы переместить элемент вправо и влево на 50%,

или не полностью позиционировать его.

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

Чтобы угасать картины друг над другом, мне нужно разместить их 'absolute', чтобы остановить их от укладки.

Вот где ваша проблема. Вы предположили, что вам нужно абсолютное позиционирование по неправильной причине.

Если у вас возникли проблемы с размещением элементов друг над другом, оберните изображения в абсолютно позиционированном контейнере шириной 100% и text-align: center

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

div {
    position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: auto;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

Очевидно, что вышеупомянутый хак имеет ужасный запах кода, но он работает на некоторых браузерах. Имейте в виду: этот хак не обязательно очевиден для других разработчиков или других браузеров (особенно IE или мобильных).

Ответ 2

Нажатие элемента left на 50% его ширины, а затем перевод его по горизонтали на 50% сработало для меня.

.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Я нашел концепцию в следующей ссылке, а затем перевел ее в соответствии с моими требованиями к горизонтальному выравниванию: https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css

Ответ 3

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

#viewer_div {
  position: relative;
}
#viewer_div img {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 50%);
}