css - 为何flex的align-items: center无法垂直居中？
问题描述
参看语法规则完成练习，我只能水平居中，无法垂直居中，是少设置了什么吗？我想实现的是在位置高度的情况下实现居中，这样可以用到flex吗？
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>.box1{ width: 400px; height: 200px; background: #ccc; position: relative;}.leftCircle{ position: absolute; left: 0; top: 0; background: #fc0; width: 50px; height:50px; -webkit-border-radius:0 0 50px 0; -moz-border-radius:0 0 50px 0; border-radius:0 0 50px 0;}.rightCircle{ position: absolute; right: 0; bottom: 0; background: #fc0; width: 50px; height:50px; -webkit-border-radius:50px 0 0 0; -moz-border-radius:50px 0 0 0; border-radius:50px 0 0 0;}body{ display: flex; justify-content: center; align-items: center;} </style></head><body><p class='box1'> <p class='leftCircle'></p> <p class='rightCircle'></p></p></body></html>
问题解答
回答1：给body 一个高度,这样可以垂直居中了
html,body,.box1{ display: flex; justify-content: center; align-items: center; height:100%;}
相关文章：
1. javascript - 一排三个框，各个框的间距是15px,距离外面的白框间距也是15px，这个css怎么写？2. javascript - Vue 的依赖追踪属于单向数据绑定还是双向绑定？3. html5 - javascript写业务有用到什么编程范式没？4. javascript - vue 数据更新了。但是dom没有更新，，，，，如图5. javascript - jQuery post()方法，里面的请求串可以转换为GBK编码么？可以的话怎样转换？6. javascript - vue 手机端项目在进入主页后 在进入子页面，直接按返回出现空白情况7. 网页爬虫 - python爬虫翻页问题，请问各位大神我这段代码怎样翻页，还有价格要登陆后才能看到，应该怎么解决8. html5 - vue-cli 装好了 新建项目的好了，找不到项目是怎么回事？9. mysql - 大表和小表连接，应该注意什么，性能上10. javascript - 哪位大神指导下，如何实现今日头条头部导航列表，点那个类型，哪种类型就居中了？
网公网安备