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 ，而不是

此外，在 .row ，将宽度设置为 auto ，而不是 100％。

您的 .flex-container 属性正常。

如果您希望 .row 在视图端口中垂直居中，将 html 和 body ，并且还要清除正文边距。

请注意。 flex-container 需要一个高度来查看垂直对齐效果，否则容器计算包含内容所需的最小高度，这小于本示例中的视图端口高度。

脚注：

flex-flow ， flex-direction ， flex-wrap 属性可以使此设计更容易实现。我认为不需要 .row 容器，除非你想在元素周围添加一些样式（背景图片，边框等）。

一个有用的资源是： http://demo.agektmr.com/flexbox/ p>

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屋！