使用flexbox将内容水平居中[重复]
我很难将容器中的一些内容水平居中：
https://jsfiddle.net/y56t31q9/6/
.container {
display: flex;
flex-direction: column;
width: 600px;
background-color: blue;
justify-content: center;
/* Not centering content horizontally? */
}
.item {
max-width: 500px;
height: 100px;
background-color: yellow;
border: 2px solid red;
}<div class="container">
<div class="item"></div>
<section class="item"></section>
<section class="item"></section>
<footer class="item"></footer>
</div>我本以为justify-content会做到这一点，但无济于事。
如有任何帮助，不胜感激，谢谢！
共有1个答案
属性justify-content:center将flex-items沿flex方向对齐-使用align-items:center-请参见下面的演示：
.container {
display: flex;
flex-direction: column;
width: 600px;
background-color: blue;
justify-content: center;
align-items:center;/*NEW*/
}
.item {
max-width: 500px;
width: 250px;/*NEW*/
height: 100px;
background-color: yellow;
border: 2px solid red;
}<div class="container">
<div class="item"></div>
<section class="item"></section>
<section class="item"></section>
<footer class="item"></footer>
</div>-
问题内容： 如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都彼此相邻（按行），并水平居中。 问题答案： 我认为您想要以下内容。 你的元素应该是块级（而非）如果你想要的高度和顶部/底部填充，以正常工作。 另外，在上，将宽度设置为而不是。 您的属性很好。 如果您希望垂直居中于视口中，请为和分配100％的高度，然后将页边距清零。 请注意，需要一个高度才能看到垂直对齐效
-
如何使用FlexBox在容器内水平和垂直地居中div。在下面的例子中，我希望每一个数字在彼此下面（在行中），水平居中。 null null http://codepen.io/anon/pen/zlxbo
-
问题内容： 我在div（）中有一个，并且我希望此图像恰好位于div的中间，但是我尝试的任何方法都无效 谢谢你的帮助！ 问题答案： 此处发布的每个解决方案都假定您知道的尺寸， 这不是常见的情况。 同样，将尺寸植入解决方案中也是痛苦的。 只需设置： 要么 就这样。 请注意，您还必须为external设置一个缩写。
-
我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢？我看到了一个解决方案使用边距自动和最大宽度，但div将被削减，所以我没有这样做。 null null
-
问题内容： 我正在尝试使用CSS将图像水平居中放置。 我正在使用以下HTML代码在屏幕上显示图像： 我正在裁剪图像，因为我只想显示一些图像，并且正在使用以下CSS： 但是，一旦裁切后，我将无法确定如何居中。 有人能帮忙吗？ 问题答案： 这样使用绝对位置和保证金位置
-
是否有一种方法可以以这种方式对齐子项:[i][i]_______[i][i][i]，而不管每个组中有多少项？