Flexbox：水平和垂直居中

问题：

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

---

解决方案：

参考一： https://stackoom.com/question/1HplE/Flexbox-水平和垂直居中
参考二： https://oldbug.net/q/1HplE/Flexbox-center-horizontally-and-vertically

来源：oschina

链接：https://my.oschina.net/u/4428122/blog/4407342