使用 Flexbox 居中 div

Question

我正在尝试使用 Flexbox 将外部 'div' 容器居中。我有一个包含 3 li's 的无序列表。 li's 宽度为：width: calc(100%/3)。 ul's 宽度为 70%。问题是当我尝试使 ul (justify-content: center) 居中时，它没有居中。

终于找到问题的根源了。当我删除行：width: calc(100%/3) 时，它会正确居中。我的问题是：如何让它正确居中？

我试过 margin: auto，但没用。

这是 JSFiddle，这是代码片段：

#flex-container {
  width: 70%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-justify-content: center;
  justify-content: center;
}
li {
  box-sizing: border-box;
  background-color: tomato;
  width: calc(100%/3);
}

<ul id="flex-container">
  <li class="flex-item">First</li>
  <li class="flex-item">Second</li>
  <li class="flex-item">Third</li>
</ul>

Answer 1

我修改了你的代码：

http://jsfiddle.net/hrr65ajr/2/

#flex-container {
    width: 70%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
}
li {
    box-sizing: border-box;
    background-color: tomato;
    margin: auto;
    width: calc(100%/3);
    text-align: center;
}

<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>

Answer 2

When I remove the line: width: calc(100%/3), it centers properly

您在使用 flex 布局时不应计算宽度，因为那是 flex 本身应该做的。

如果您希望对齐 li 内的文本，那么 text-align 就是您所需要的。您还应该从 li 中删除 width 并改用 flex 属性。

片段：

* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
    list-style-type: none;
    width: 70%; display: flex; 
}
li {
    flex: 1 1 auto;
    background-color: tomato; border: 1px solid #fff;
    text-align: center;   
}

<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>

如果您想要可变宽度 lis，那么 justify-content 就是您所需要的。您应该通过 width 属性控制宽度，并根据需要使用 flex 属性来扩展或收缩。

片段：

* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
    list-style-type: none; width: 70%;
    display: flex; justify-content: center;
    background-color: #eee;
}
li {
    flex: 0 0 auto; width: 15%;
    background-color: tomato; border: 1px solid #fff;
}
li:first-child { width: 20%; }
li:last-child { width: 30%; }

<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>

Answer 3

试试这个：

HTML

<div class="center">
<ul id="flex-container">
    <li class="flex-item">First</li>
    <li class="flex-item">Second</li>
    <li class="flex-item">Third</li>
</ul>
</div>

CSS

.center {
    display:flex;
    -webkit-justify-content: center;
    justify-content: center;
}
#flex-container {
    width: 70%;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
}
li {
    box-sizing: border-box;
    background-color: tomato;
    width: calc(100%/3);
}

使用 Flexbox 居中 div

Center div using Flexbox

css

flexbox