如何在容器中使用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
结果:
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用于分组你的“项目”，并在一个基于列的顺序。
您可以在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 {
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 >
