我需要一些CSS帮助,我有一个用于加载页面的微调器,完全居中,它是垂直居中的,但现在我怎样才能将所有可能的屏幕宽度居中？
这是我的标记：
<!DOCTYPE html>
<html>
...
<body>
<div class="loading">
<div class="loader"></div>
</div>
...
</body>
</html>
这是我的样式表：
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999999999;
overflow: hidden;
background: #fff;
}
.loader {
font-size: 10px;
border-top: .8em solid rgba(218,219,223,1);
border-right: .8em solid rgba(218,1);
border-bottom: .8em solid rgba(218,1);
border-left: .8em solid rgba(58,166,165,1);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader,.loader:after {
border-radius: 50%;
width: 8em;
height: 8em;
display: block;
position: absolute;
top: 50%;
margin-top: -4.05em;
}
解决方法
由于元素的固定宽度为8em,您可以添加左边：50％然后使用margin-left替换元素宽度的一半：-4px：
Updated Example
.loader {
left: 50%;
margin-left: -4em;
}
如果元件的尺寸未固定且事先已知,则为see my other answer for alternative options.