css - 為何flex的align-items: center無法垂直居中？
問題描述
參看語法規(guī)則完成練習(xí)，我只能水平居中，無法垂直居中，是少設(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>
問題解答
回答1：給body 一個高度,這樣可以垂直居中了
html,body,.box1{ display: flex; justify-content: center; align-items: center; height:100%;}
相關(guān)文章：
1. java - 我在用Struts2上傳文件時，報以下錯誤怎么回事？2. javascript - 關(guān)于Lazyload遇到的問題3. java題目 任意一個字符串 倒置輸出，保持單詞的完整性4. javascript - 如果根據(jù)參數(shù)給table中的tr綁定不同事件5. 算法 - python 給定一個正整數(shù)a和一個包含任意個正整數(shù)的 列表 b，求所有<=a 的加法組合6. c++ - 如何正確的使用QWebEngineView?7. angular.js - react的redux和vue的vuex，angular呢8. javascript - 游戲里物體角色層次渲染邏輯和代碼怎么寫才好？9. javascript - js一個小的算法問題，找個好一點(diǎn)的答案。10. javascript - js 寫一個正則 提取文本中的數(shù)據(jù)
網(wǎng)公網(wǎng)安備