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 - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?5. javascript - 移動端上不能實現拖拽布局嗎?6. 實現bing搜索工具urlAPI提交7. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化8. phpstudy8.1支持win11系統嗎?9. 配置Apache時,添加對PHP的支持時語法錯誤10. javascript - nodejs關于進程間發送句柄的一點疑問

網公網安備