Css 使用Flexbox进行中心div

我正在尝试使用

Flexbox

将外部“div”容器居中。我有一个无序的列表，上面有3个李的。李的宽度是：

width:calc（100%/3）

。

ul的

宽度为

70%

。问题是，当我尝试将

ul

（

justify content:center

）居中时，它没有居中

我终于找到了问题的根源。当我删除行：

宽度：calc（100%/3）

时，它会正确居中。我的问题是：我怎样才能使它正确地居中

我尝试了

margin:auto

，但没有成功

下面是代码，下面是代码片段：

#柔性容器{
宽度：70%；
列表样式类型：无；
填充：0；
保证金：0；
显示：-webkit内联flex；
显示：内联flex；
-webkit内容：中心；
证明内容：中心；
}
李{
框大小：边框框；
背景色：番茄；
宽度：计算值（100%/3）；
}

首先
第二项
第三项

我修改了您的代码：

#柔性容器{
宽度：70%；
列表样式类型：无；
填充：0；
保证金：0；
显示：-webkit内联flex；
显示：内联flex；
-webkit内容：中心；
证明内容：中心；
}
李{
框大小：边框框；
背景色：番茄；
保证金：自动；
宽度：计算值（100%/3）；
文本对齐：居中；
}

首先
第二项
第三项

当我删除行：width:calc（100%/3）时，它会正确居中

在使用

flex

layout时，不应该计算宽度，因为

flex

本身就应该这样做

如果要对齐

li

s中的文本，则需要对齐

text align

。您还应该从

li

s中删除

width

，并改用

flex

属性

片段：

*{框大小：边框框；填充：0；边距：0；}
#柔性容器{
列表样式类型：无；
宽度：70%；显示：柔性；
}
李{
flex:1自动；
背景颜色：番茄；边框：1px纯色#fff；
文本对齐：居中；
}

首先
第二项
第三项

试试这个：

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>

---

谢谢你的回答！但我正试图居中放置

#flexContainer

如何使它们的宽度相同，一行中只有3个？@Jessica：默认情况下，它们的宽度将与我答案中的第一个案例相同。你说一排只有3个是什么意思？根据你的问题，你只有3个

li

s。您是否有不确定数量的

li

s？是否要将这些

li

s包装为每行3个？如果是，那么你应该在你的问题中明确说明。请更新您的问题，包括所有必要的细节，以及您到底想做什么。我仍然不确定您的用例。您还没有澄清我的回答中的两个案例中哪一个适合您的用例。

.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);
}