1、垂直居中,写在父级上
div{ display: flex; justify-content: center; align-items: center; }
2、flex-左右两端,垂直居中
该布局在移动端较为常见
<style> .wrap{ display: flex; justify-content: space-between; align-items: center; width: 200px; height: 100px; border: 1px solid #000; } </style> <div class="wrap"> <p>左边文字</p> <p>右边文字</p> </div>
3、10个div分两行布局,(保持div原有的宽度)
<style> .wrap{ width: 300px; height: 500px; background: pink; } .nav{ display: flex; flex-wrap: wrap; /*伸缩盒子的换行*/ } .item{ width: 20%; border: 1px solid #000; box-sizing: border-box; } </style> <div class="wrap"> <div class="nav"> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> <div class="item">菜单</div> </div> </div>