Центрирующий контейнер внутри контейнера полной ширины?

Question

Я пытаюсь центрировать контейнер максимальной ширины 1100px относительно контейнера с шириной 100%, но у меня возникают проблемы с этим.

<div class="container-full"> 
    <div class="container"> 
     <nav> 
      <h1>Name</h1> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Contact</li> 
      </ul> 
     </nav> 
    </div> 
</div> 

CSS:

.container-full { 
    width:100%; 
    background-color:blue; 
} 

.container { 
    width:1100px; 
    background-color:white; 
} 

nav { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
} 

ul { 
    list-style-type:none; 
    padding:0; 
    display:flex; 
} 

Я думаю, что это что-то делать с нав быть гибким ящик, но я не знаю, как я могу решить эту проблему.

Answer 1

Добавить поля в контейнере:

margin: auto; 

Answer 2

Самый простой способ по горизонтали в центре что-то с определенной шириной, чтобы использовать margin-left: auto; margin-right: auto;

.container-full { 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 

 
.container { 
 
    width: 1100px; 
 
    background-color: white; 
 
    margin: auto; 
 
} 
 

 
nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    display: flex; 
 
}

<div class="container-full"> 
 
    <div class="container"> 
 
    <nav> 
 
     <h1>Name</h1> 
 
     <ul> 
 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

Answer 3

Решение является добавление margin: 0 auto; к вашему .container.

См РАБОЧАЯ скрипку here

.container-full { 
 
    width:100%; 
 
    background: blue; 
 
} 
 

 
.container { 
 
    width:1100px; 
 
    background: red; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    display:flex; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
    padding:0; 
 
    display:flex; 
 
}

<div class="container-full"> 
 
    <div class="container"> 
 
     <nav> 
 
      <h1>Name</h1> 
 
      <ul> 
 
       <li>Home</li> 
 
       <li>About</li> 
 
       <li>Contact</li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</div>

Answer 4

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

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

exaple codepen ссылка: http://codepen.io/hellouniverse/pen/PWyVbd

@mixin align-items() { 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-flex-align: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    align-items: center; 
} 

@mixin flexbox() { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

@mixin justify-content ($val) { 
    -webkit-justify-content: $val; 
    -moz-justify-content: $val; 
    -ms-justify-content: $val; 
    justify-content: $val; 
} 


%aligner, 
.aligner { 
    @include align-items(); 
    @include flexbox(); 
    @include justify-content(center); 

    &-item { 
    max-width: 50%; 
    &--top { 
     -webkit-align-content: flex-start; 
     -moz-align-content: flex-start; 
     -ms-align-content: flex-start; 
     -ms-flex-line-pack: start; 
     align-content: flex-start; 
    } 

    &--bottom { 
     -webkit-align-content: flex-end; 
     -moz-align-content: flex-end; 
     -ms-align-content: flex-end; 
     -ms-flex-line-pack: end; 
     align-content: flex-end; 
    } 
    } 
} 

И ваше решение будет после добавления выше SCSS подмешать

.container-full { 
    width: 100%; 
    background-color: blue; 
} 

.container { 
    width: 1100px; 
    background-color: white; 
} 

<div class="container-full aligner"> 
    <div class="container aligner"> 
     <nav> 
      <h1>Name</h1> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Contact</li> 
      </ul> 
     </nav> 
    </div> 
</div>