很多时候我们需要用到position给元素定位,但是当我们用到了position定位之后,我们会发现无论是margin还是padding都不能给元素移动,就算费劲心思移动了,当页面比例尺寸发生变化的时候,元素又变成不居中了。
1.html代码
<div class="test">
我是一个固定的div
</div>
<div class="virtual_body">
<div style="height:888px;">
我是背景!
</div>
<div style="height:888px;">
我是背景!
</div>
<div style="height:888px;">
我是背景!
</div>
</div>
2.css代码
html,
body {
overflow: hidden;
margin: 0px;
width: 100%;
height: 100%;
}
.virtual_body {
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: auto;
background-color: gray;
}
//上面两个元素css其实跟这次的元素定位关系不大,只是为了提现效果,下方test的css才是最重要的
.test {
position: fixed;//flex布局
left: 0;
right: 0;//如果要居中的话,必须得使用left与right,并且两个都得是0,才能使用margin,才会居中
margin: auto;
z-index: 10;//让这个test标签浮在在上面(最好让test的z-index在你的html里面是最大的一个)
bottom: 20px;//距离底部的距离
width: 200px;
height: 44px;
background: linear-gradient(129deg, #008AF9 0%, #CBEAFE 100%);
border-radius: 22px;//圆角
display: flex;//不重要
align-items: center;//不重要
padding: 10px;//不重要
}
总结:这次的想在写了position定位的标签里面又同时想让该元素居中就得left:0;right:0;margin:auto;才能生效。