关于垂直居中的问题~~
来源：2-10 编程练习
慕神9465694
2019-07-26 15:51:09
先请老师帮忙检查。然后有个问题，两个div都固定了宽高。蓝色的div son是红色div的子元素。当不设置定位，只设置margin 0 auto时，蓝色div能在红色div中水平居中。但设置margin auto 0 时，为什么不能实现垂直居中呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
position:relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
margin:0 auto;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto auto;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
1回答
-
你好同学，效果实现的正确。另外，margin在设置水平居中的时候，需要计算出父元素的宽度然后进行设置的。而margin的一个特殊情况就是，它不能计算出父元素的高度，所以没有办法实现垂直居中。特殊记着就行。
祝学习愉快，望采纳。
0
相似问题
回答 1
回答 1