CSS: Как разместить div в центре с динамической шириной

Question

У меня есть всплывающее окно, которое расположено в центре экрана с: transform: translate(-50%, -50%); и position: absolute. К сожалению, по какой-то причине моя ширина фиксирована и не является динамической (на основе содержимого).

Это мой jsfiddle: https://jsfiddle.net/qh13mnaf/1/

Почему ширина всплывающего окна не больше?

Answer 1

Решение:

Набор .popup-content { width: 100%; } и гнездо ваше содержание в другой DIV display: table; margin: 0 auto;

JSFIDDLE DEMO

Объяснение:

Ваш центрируется ДИВ .popup-content имеет атрибут left: 50%, что означает это будет оставьте левую половину своего родительского пустого. Это означает, что div устанавливает свою собственную ширину во всю ширину родительского элемента, который остается, хотя он будет равен 50%.

Например, если вы установили .popup-content с шириной до left: 30%, он будет использовать ширину своих родителей 70%.

Ваш второй атрибут css transform: translate(-50%, -50%); только перемещает весь div без изменения (или влияния) его ширины.

CSS вывод:

Я предполагаю, что вы хотите быть ДИВ только как большой по мере необходимости и по центру и по горизонтали и по вертикали. Если то правильно, Херес шаг за шагом решение:

Как ваш CSS делает хорошую работу центрирования ее в вертикальном положении, вы можете сохранить это, а просто установить его ширину до 100%:

.popup-content { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    transform: translate(0%, -50%); 
} 

Далее вы может гнездиться ваше содержание внутри других дел до центра его в горизонтальном положении с помощью display: table;

.popup-center-horizontal { 
    display: table; 
    margin: 0 auto; 
    background: red; 
} 

Вы можете проверить рабочее демо прямо здесь JSFIDDLE DEMO.

Если вы не хотите, чтобы ваш ДИВ достичь стороны, вы можете установить max-width, чтобы ограничить его размер, например:

.popup-center-horizontal { 
    max-width: 90%; 
} 

Работы по IE8 +.