выровнять переменную ширину div в центре

Question

Применяется для дублирования вопроса, но ни один из ответов на другие вопросы, похоже, не устраняет мою проблему. Я хотел бы выровнять div в центре страницы. Размер div должен быть таким же широким, как и содержимое внутри него. Он будет использоваться как модальное всплывающее окно. У меня настроить jsFiddle здесь: http://jsfiddle.net/PDzNj/11/

div выравнивает его левую сторону в середине, а не центр div (что желаемый эффект)

Спасибо заранее за любую помощь

Answer 1

Один из вариантов - эмулировать таблицу с окружением <div>.

<div class='outer'> 
    <div class='inner'> 
     <div class='thebox'>Contents</div> 
    </div> 
</div> 

И затем использовать CSS:

div.outer { 
    display:table; 
    width:100%; //Or however wide you want the container to be 
} 
div.inner { 
    display:table-cell; //This allows the use of vertical-align 
    vertical-align:middle; 
    text-align:center; 
    width:100%; 
} 
div.thebox { //Your variable-width container 
    display:inline-block; //Makes it obey text-aligning. 
} 

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