参看语法规则完成练习,我只能水平居中,无法垂直居中,是少设置了什么吗?
我想实现的是在位置高度的情况下实现居中,这样可以用到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>
给body 一个高度,这样可以垂直居中了