Центр Div внутри другого (100% ширина) div

Довольно "простая" проблема здесь и не уверен, почему это так сложно.

У вас есть размер в размере 100% (ширина).
У другого div, расположенного в середине этого div (размер 940px),

Любые идеи?:)

Ответ 1

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }

Ответ 2

Ниже стиль для внутреннего div будет центрировать его.

margin: 0 auto;

Ответ 3

для получения подробной информации, скажем, что код ниже сделает центр с выровненными div:

margin-left: auto;
margin-right: auto;

или просто используйте:

margin: 0 auto;

но помните, что вышеупомянутый CSS-код работает только при указании фиксированной ширины (не 100%) в вашем элементе html. поэтому полное решение для вашей проблемы будет:

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}

Ответ 4

Ключ: margin: 0 auto; на внутреннем div. Пример доказательства:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="background-color: blue; width: 100%;">
        <div style="background-color: yellow; width: 940px; margin: 0 auto;">
            Test
        </div>
    </div>
</body>
</html>

Ответ 5

.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Не работает в Internet Explorer 7... но кому это нужно?

Ответ 6

Просто добавьте margin: 0 auto; во внутренний div.