如何在容器中使用flexbox水平和垂直地居中div。在下面的例子中，我想要每个数字都在对方下面(在行中)，这是水平居中。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
http://codepen.io/anon/pen/zLxBo
您可以在flex-container中添加flex-direction:column
.flex-container {
flex-direction: column;
}
将display:inline-block添加到flex-item
.flex-item {
display: inline-block;
}
因为您添加的宽度和高度对该元素没有影响，因为它具有内联显示。尝试添加display:inline-block或display:block。了解更多关于宽度和高度的知识。
也添加到row类(你被给予row{}而不是作为样式)
.row{
width:100%;
margin:0 auto;
text-align:center;
}
工作演示:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content:center;
flex-direction:column;
}
.row{
width:100%;
margin:0 auto;
text-align:center;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
工作演示栏:
.flex-container {
padding: 0;
margin: 0;
width: 100%;
list-style: none;
display: flex;
align-items: center;
}
.row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
我想你想要的东西是这样的。
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
参见demo: http://jsfiddle.net/audetwebdesign/tFscL/
如果你想让高度和上下填充正常工作，你的.flex-item元素应该是块级(div而不是span)。
同样，在.row上，将宽度设置为auto，而不是100%。
你的.flex-container属性没问题。
如果你想要.row在视图端口中垂直居中，为html和body指定100% height，并将body边距归零。
请注意，.flex-container需要一个高度来查看垂直对齐效果，否则，容器将计算包含内容所需的最小高度，该高度小于本例中的视图端口高度。
补充说明:
flex-flow、flex-direction、flex-wrap属性可以使这个设计更容易实现。我认为.row容器是不需要的，除非你想在元素(背景图像、边框等)周围添加一些样式。
一个有用的资源是:http://demo.agektmr.com/flexbox/
结果:
CODE
HTML:
<div class="flex-container">
<div class="rows">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.rows {
display: flex;
flex-direction: column;
}
其中flex-container div用于垂直和水平居中你的行div，和行div用于分组你的“项目”，并在一个基于列的顺序。
