为何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>
<div class="box1">
    <div class="leftCircle"></div>
    <div class="rightCircle"></div>
</div>
</body>
</html>
阅读 18.2k
1 个回答

给body 一个高度,这样可以垂直居中了

  html,body,.box1{
            display: flex;
            justify-content: center;
            align-items: center;
            height:100%;
        } 
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏