在全宽容器内居中容器？答案

【问题标题】：Centering container inside full-width container?在全宽容器内居中容器？
【发布时间】：2017-02-10 04:18:15
【问题描述】：

我正在尝试将最大宽度为 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;
}

我认为这与 nav 是一个弹性盒子有关，但我不确定如何解决这个问题。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将具有定义宽度的东西水平居中的最简单方法是使用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>

【讨论】：

【解决方案2】：

为您的容器添加边距：

   margin: auto;

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

首先，我不确定你想做什么。如果您试图将容器的内容相对于容器满居中，那么下面的方法可能会起作用。

如果您想将任何东西居中，那么您可能需要使用以下 mixin。

示例代码笔链接：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 mixin后你的解决方案就变成了

.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>

【讨论】：