css - 为何flex的align-items: center无法垂直居中?
本文介绍了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>
<div class="box1">
<div class="leftCircle"></div>
<div class="rightCircle"></div>
</div>
</body>
</html>
解决方案
给body 一个高度,这样可以垂直居中了
html,body,.box1{
display: flex;
justify-content: center;
align-items: center;
height:100%;
}
这篇关于css - 为何flex的align-items: center无法垂直居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文