我的文字和“加载程序”有问题。我希望它们位于中间，但它们位于顶部居中。
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: white;
line-height: 1.5;
text-align: center;
text-decoration: none;
}<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>如何使它们出现在屏幕的中心，而不是顶部？
最佳答案
由于要将文本和微调框都放在中间，因此在它们周围都添加了一个包装器。然后，
如果要将position fixed放置在整个窗口的中心，只需将其添加到包装器中即可。然后通过添加left 50%和top 50%将其置于中心。然后，您必须使用width and height补偿其原始translate transform的一半。
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: red;
line-height: 1.5;
text-align: center;
text-decoration: none;
}<body class="Background" background="Background.jpg">
<div id="wrapper">
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>关于html - 文字和加载器不在中间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48744350/