盒子网页居中,我记得用margin:0 auto;就可以实现居中网页,为什么我的不可以

来源:2-8 position-absolute(实际工作用的最多,同时也相对比较难)

抓住这只猪

2019-08-20 15:20:51

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid pink;
    background-color:pink;
    margin: 0 auto;
    top:50%;
    margin-top:-50px;
/*    left:50%;
    margin-left: -50px;*/
    
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

为什么只能实现垂直居中

写回答

1回答

好帮手慕言

2019-08-20

同学你好,绝对定位之后,margin:0 auto;就不会生效了,同学记住就可以了。

下面的例子中是可以实现水平居中的效果:

http://img.mukewang.com/climg/5d5bafb6000145c406060425.jpg

如果帮助到了你,欢迎采纳~祝学习愉快~

0

0 学习 · 40143 问题

查看课程