如何在容器中使用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
用这个:
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
像这样的HTML标记:
<html>
<body>
<main>
<button> abc </button>
<p> something </p>
</main>
</body>
</html>
Html, body {
显示:flex;
对齐项目:中心;
justify-content:中心;
高度:100%;
｝
< html >
身体< >
<大>
<button> ABC </button>
<p> something </p>
主> < /
身体< / >
< / html >
我想你想要的东西是这样的。
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/
