极客观点
项目管理
HarmonyOS
margin:0 auto;可以水平居中。
1。为何这里的margin:0 auto;失效了？
<html>
<meta charset="utf8">
<style>
.Center-Container {
width: 300px;
height:300px;
border:1px solid red;
position:relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
margin: 0 auto;
border:1px solid red;
position:absolute;
}
</style>
<body>
<div class="Center-Container">
<div class="Absolute-Center">居中
</div>
</div>
</body>
</html>效果如下
去掉position就没有问题。
<html>
<meta charset="utf8">
<style>
.Center-Container {
width: 300px;
height:300px;
border:1px solid red;
}
.Absolute-Center {
width: 50%;
height: 50%;
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid red;
}
</style>
<body>
<div class="Center-Container">
<div class="Absolute-Center">居中
</div>
</div>
</body>
</html>效果如下
2。为何top/right/bottom/left:0;margin:0 auto; 产生水平垂直居中了？
我看了文献，https://segmentfault.com/a/11...
讲了一堆，也没有看懂。
<html>
<meta charset="utf8">
<style>
.Center-Container {
width: 300px;
height:300px;
border:1px solid red;
position:relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
margin: 0 auto;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid red;
position:absolute;
}
</style>
<body>
<div class="Center-Container">
<div class="Absolute-Center">居中
</div>
</div>
</body>
</html>
3。为何何top/right/bottom/left:0;margin:auto;就垂直居中了？
我看了文献，https://segmentfault.com/a/11...
讲了一堆，也没有看懂。
<html>
<meta charset="utf8">
<style>
.Center-Container {
width: 300px;
height:300px;
border:1px solid red;
position:relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid red;
position:absolute;
}
</style>
<body>
<div class="Center-Container">
<div class="Absolute-Center">居中
</div>
</div>
</body>
</html>
html5
绝对定位元素有一个高级特性就是其具有自动伸缩功能，当把
width或者是height设置成auto，绝对定位元素会根据你设置的top/bottom/left/right值进行自动伸缩，也就是说当你设置left:50px;right:70px，假设你的父元素宽度大于120px，其绝对定位元素就会自动伸到你所设置的位置。而当我们把高和宽设置成固定值的时候，由于元素无法拉伸，所以就呈现了居中的状态。详情请见我的博客：CSS position: absolute 绝对定位精讲