flex布局水平垂直居中

flex布局教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
教程2: https://www.jianshu.com/p/c71b65a2b3e2
flexDirection、justifyContent、alignItems的简单使用
https://www.jianshu.com/p/c390042d6140

<div class="box"> <section class="inner"></section> </div> .box { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 1000px; height: 600px; border: 1px solid red; } .inner { width: 300px; height: 200px; background-color: red; }

 

posted @ 2020-02-23 22:46  simple-love  阅读(3154)  评论(0编辑  收藏  举报