Flexbox：水平和垂直居中
如何水平放置div，并使用flexbox在容器中垂直放置。 在下面的例子中，我希望每个数字都在下面（以行为单位），它们是水平居中的。
.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>我认为你需要像下面这样的东西。
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
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>如何在Flexbox中垂直和水平居中元素
以下是两个一般的定心解决方案。
一个用于垂直对齐的弹性项目（ flex-direction: column ），另一个用于水平对齐的弹性项目（ flex-direction: row ）。
在这两种情况下，居中divs的高度可以是可变的，未定义的，未知的，无论如何。 居中div的高度并不重要。
以下是两者的HTML：
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS （不包括装饰风格）
当Flex项目垂直堆叠时：
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
DEMO
当flex项目水平堆叠时：
从上面的代码中调整flex-direction规则。
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
DEMO
集中Flex项目的内容
flex格式化上下文的范围仅限于父子关系。 儿童以外的柔性容器的后代不参与柔性布局，并且会忽略柔性属性。 基本上，flex属性不能在孩子之外继承。
因此，您将始终需要将display: flex或display: inline-flex应用于父元素，以便将flex属性应用于子元素。
为了垂直和/或水平居中放置在Flex项目中的文本或其他内容，将项目设置为（嵌套）弹性容器，并重复居中规则。
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
更多细节在这里：如何垂直对齐flexbox内的文本？
或者，您可以将margin: auto应用于Flex项目的内容元素。
p { margin: auto; }
在此了解Flex auto边距：对齐Flex项目的方法（参见框＃56）。
集中多行弹性项目
当flex容器有多行时（由于包装）， align-content属性对于横轴对齐是必需的。
从规格：
8.4。 打包Flex线条： align-content属性
当cross-axis中有额外的空间时， align-content属性会在flex容器内对齐一个flex容器的行，类似于justify-content在主轴内对齐各个项目的方式。 请注意，此属性对单行flex容器没有影响。
更多细节在这里：flex-wrap如何与align-self，align-items和align-content一起工作？
浏览器支持
除IE <10外，Flexbox受所有主流浏览器的支持。一些最新浏览器版本（如Safari 8和IE10）需要供应商前缀。 要快速添加前缀，请使用Autoprefixer。 在这个答案的更多细节。
针对旧版浏览器的定位解决方案
有关使用CSS表格和定位属性的替代定位解决方案，请参阅此答案：https://stackoverflow.com/a/31977476/3597276
不要忘记使用重要的浏览器特定属性：
align-items：center; - >
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content：center; - >
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
你可以阅读这两个链接，以更好地理解flex：http://css-tricks.com/almanac/properties/j/justify-content/和http://ptb2.me/flexbox/
祝你好运。
链接地址: http://www.djcxy.com/p/2123.html