我需要一些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：
- .loader {
- left: 50%;
- margin-left: -4em;
- }
如果元件的尺寸未固定且事先已知,则为see my other answer for alternative options.
