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. django - 后臺返回的json數據經過Base64加密，獲取時用python如何解密~！2. css3 - 請問一下在移動端CSS布局布局中通常需要用到哪些元素，屬性？3. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？4. 我的html頁面一提交，網頁便顯示出了我的php代碼，求問是什么原因？5. tp6表單令牌6. angular.js - 如何通俗易懂的解釋“依賴注入”？7. docker 17.03 怎么配置 registry mirror ?8. node.js - node 客戶端socket一直報錯Error: read ECONNRESET，用php的socket沒問題哈。。9. 老哥們求助啊10. 在MySQL中新增字段時，報錯??
網公網安備