html - Flexbox：水平和垂直居中(Flexbox: center horizontally and vertically)

Question

How to center div horizontally, and vertically within the container using flexbox.

(如何使用flexbox在容器内水平和垂直居中div。)

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

(http://codepen.io/anon/pen/zLxBo)

  ask by bsr translate from so

Answer 1

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/

(参见演示： 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.

(如果您希望高度和顶部/底部填充正常工作，则.flex-item元素应为块级（ div而不是span ）。)

Also, on .row , set the width to auto instead of 100% .

(另外，在.row ，将宽度设置为auto而不是100% 。)

Your .flex-container properties are fine.

(您的.flex-container属性很好。)

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.

(如果您希望.row在视.row垂直居中，请为html和body指定100％的高度，并且将body边距设为零。)

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.

(请注意， .flex-container需要一个高度才能看到垂直对齐效果，否则，容器将计算封装内容所需的最小高度，该最小高度小于此示例中的视口高度。)

Footnote:

(脚注：)
The flex-flow , flex-direction , flex-wrap properties could have made this design easier to implement.

(flex-flow ， flex-direction ， flex-wrap属性可以使此设计更易于实现。)

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).

(我认为不需要.row容器，除非您要在元素周围添加一些样式（背景图像，边框等）。)

A useful resource is: http://demo.agektmr.com/flexbox/

(有用的资源是： http : //demo.agektmr.com/flexbox/)