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>
