js - flex布局测试案例:完美居中

<span>I love flex layout!</span>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
font-size:3em;
color:#00ffff;
}
</style>
![enter image description here][1]
<p>与自己为敌，</p>
<p>与自己为友，</p>
<p>一边深挖思想，</p>
<p>一边埋葬自己。</p>
<style>
body{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:1.2em;
color:purple;
}
</style>
![enter image description here][2]
课工场回馈百万奖学金，为你一次性减免千元学费， 欢迎加入前端/JAVA/PHP学习交流群120342833

[1]: http://htmljs.b0.upaiyun.com/uploads/1491807340297-b64456261088fa96cdb0670e069eb9f8.jpg
[2]: http://htmljs.b0.upaiyun.com/uploads/1491807350483-607edc0491f115d0c2c84cf8c57c2c18.jpg