<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]
課工場(chǎng)回饋百萬(wàn)獎(jiǎng)學(xué)金，為你一次性減免千元學(xué)費(fèi)， 歡迎加入前端/JAVA/PHP學(xué)習(xí)交流群120342833

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

轉(zhuǎn)載于:https://www.cnblogs.com/xsns/p/6689076.html

總結(jié)

以上是生活随笔為你收集整理的js - flex布局测试案例:完美居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。