css - 為何flex的align-items: center無(wú)法垂直居中？
問(wèn)題描述
參看語(yǔ)法規(guī)則完成練習(xí)，我只能水平居中，無(wú)法垂直居中，是少設(shè)置了什么嗎？我想實(shí)現(xiàn)的是在位置高度的情況下實(shí)現(xiàn)居中，這樣可以用到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>
問(wèn)題解答
回答1：給body 一個(gè)高度,這樣可以垂直居中了
html,body,.box1{ display: flex; justify-content: center; align-items: center; height:100%;}
相關(guān)文章：
1. javascript - node.js服務(wù)端渲染解疑2. javascript - 求助關(guān)于js正則問(wèn)題3. html5 - 如何解決bootstrap打開(kāi)模態(tài)modal窗口引起頁(yè)面抖動(dòng)?4. javascript - 求助這種功能有什么好點(diǎn)的插件？5. objective-c - ios百度地圖定位問(wèn)題6. 微信開(kāi)放平臺(tái) - Android調(diào)用微信分享不顯示7. html - css 如何添加這種邊框?8. html5 - rudy編譯sass的時(shí)候有中文報(bào)錯(cuò)9. javascript - 關(guān)于定時(shí)器 與 防止連續(xù)點(diǎn)擊 問(wèn)題10. 為何 localStorage、sessionStorage 屬于html5的范疇，但是為何 IE8卻支持？
網(wǎng)公網(wǎng)安備