Flexbox:水平和垂直居中 [英] Flexbox: center horizontally and vertically
问题描述
如何使用flexbox在水平方向,以及在容器内垂直居中。
.flex-container {padding:0; margin:0; list-style:none;显示: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;颜色:白色; 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 {height:100%;} body {margin:0;}。 padding:0; margin:0;显示:-webkit-box;显示:-moz-box; display:-ms-flexbox;显示:-webkit-flex;显示: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;颜色:白色; 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>
: http://jsfiddle.net/audetwebdesign/tFscL/
您的 .flex-item
元素应为块级别( div
,而不是<$ c $
此外,在上,如果您希望高度和顶部/底部填充正常工作,请使用
row ,将宽度设置为 auto
而不是 100%
。 b
$ b
您的 .flex-container
属性正常。
.row
在视图端口中垂直居中,为 html
和 body
,并且还清除正文
边距。
请注意, .flex-container
需要一个高度来查看垂直对齐效果,否则容器计算包含内容所需的最小高度,这小于此示例中的视图端口高度
flex-direction
, flex-wrap
属性可以使此设计更容易实现。我认为不需要 .row
容器,除非你想在元素周围添加一些样式(背景图片,边框等)。 一个有用的资源是: http://demo.agektmr.com/flexbox/
How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.
.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
I think you want something like the following.
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>
See demo at: http://jsfiddle.net/audetwebdesign/tFscL/
Your .flex-item
elements should be block level (div
instead of span
) if you want the height and top/bottom padding to work properly.
Also, on .row
, set the width to auto
instead of 100%
.
Your .flex-container
properties are fine.
If you want the .row
to be centered vertically in the view port, assign 100% height to html
and body
, and also zero out the body
margins.
Note that .flex-container
needs a height to see the vertical alignment effect, otherwise, the container computes the minimum height needed to enclose the content, which is less than the view port height in this example.
Footnote:
The flex-flow
, flex-direction
, flex-wrap
properties could have made this design easier to implement. I think that the .row
container is not needed unless you want to add some styling around the elements (background image, borders and so on).
A useful resource is: http://demo.agektmr.com/flexbox/
这篇关于Flexbox:水平和垂直居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!