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. redis sentinel怎么跑守护进程以及日志记录位置的？2. django - Nginx uwsgi 进程问题3. javascript - sublime快键键问题4. 前端 - 这段代码一直生效不了，查半天因为 top: 0px; 分号后一个隐藏的东西，也不是占位符...删了就可以生效，这是什么情况。。5. javascript - 爱加密的HTML5应用加固服务是什么原理？6. 微信小程序支持跳转到外部链接网页吗7. javascript - 求助关于js正则问题8. 关于纯用css写导航鼠标移入事件的问题？9. 百度地图api - Android百度地图SDK，MapView上层按钮可见却不可触，怎么解决？10. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？
网公网安备