Html 垂直居中的加载旋转器叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26451948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically Centered Loading Spinner Overlay
提问by lowcoupling
I would like to show a vertically centered loading spinner like one of these https://github.com/jlong/css-spinnersin a web page. Follow the codepen.io link on that page to see them in motion.
我想在网页中显示一个垂直居中的加载微调器，就像这些https://github.com/jlong/css-spinners之一。按照该页面上的 codepen.io 链接查看它们的动态。
How can I do this via CSS? Consider I am dealing with a Google App Engine application based on Python, Twitter Bootstrap and Polymer.
我怎样才能通过 CSS 做到这一点？考虑我正在处理基于 Python、Twitter Bootstrap 和 Polymer 的 Google App Engine 应用程序。
回答by George Kormaris
Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:
假设您使用“Plus”微调器。您可以将其包装在覆盖整个页面的固定位置 div 中：
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto;on the item to be centered horizontally.
由于有时您可能想要使用不同的微调器，它们具有不同的宽度，因此 CSS 不应该对宽度进行硬编码。您可以在 flexbox 中垂直居中项目，然后margin: 0 auto;在项目上使用以水平居中。
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
align-items: center;
top: 0;
}
.plus {
display: flex;
margin: 0 auto;
}
This way, you can even color the background, make it semi-transparent etc.
这样，您甚至可以为背景着色，使其半透明等。
Here's a JSFiddle
这是一个JSFiddle
回答by Paul O'B
I don't know anything about a google app engine I'm afraid but to centre an element that has a width and height is pretty easy.
恐怕我对谷歌应用程序引擎一无所知，但是将具有宽度和高度的元素居中非常容易。
I assume this is a fixed positioned element so just use top,right,left and bottom and then use margin:auto to center vertically and horizontally.
我假设这是一个固定定位的元素，所以只需使用顶部、右侧、左侧和底部，然后使用 margin:auto 垂直和水平居中。
e.g.
例如
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spinner{
position:fixed;
z-index:99;/* make higher than whatever is on the page */
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background:red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
回答by Gags
HTML
HTML
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
CSS
CSS
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
top: 0;
}
.plus {
margin: auto;
}
Only display:flexto parent and margin: autowill do the required thing.
只display:flex对父母，margin: auto会做所需的事情。
Here is JS Fiddle
这是JS小提琴
