position定位下，同时居中，无需js

很多时候我们需要用到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；才能生效。