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. android - weex 項目createInstanceReferenceError: Vue is not defined2. pdo 寫入到數據庫的內容為中文的時候寫入亂碼3. PHPExcel表格導入數據庫怎么導入4. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯，是什么情況？求大神指點5. javascript - 如圖，百度首頁，查看源代碼為什么什么都沒有？6. vue2.0+webpack 如何使用bootstrap？7. PHP類封裝的插入數據，總是插入不成功，返回false；8. mac連接阿里云docker集群，已經卡了2天了，求問？9. javascript - 前端開發框架express，在他的模板引擎下怎么給按鈕添加綁定事件？10. python - 小白django提交數據后，沒有存儲到數據庫（查閱資料并沒有發現問題）
網公網安備