Question

我的文字和＃34;装载机＆＃34;有问题。我希望它们在MIDDLE中，但它们位于顶部。

＆＃13;

.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;
}

＆＃13;

<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>

＆＃13;

如何让他们进入屏幕的中心，而不是在TOP？

Answer 1

由于你希望文本和微调器都在中间，所以在它们周围添加一个包装器。然后，

如果您希望将它放在整个窗口的中心位置，只需将position fixed添加到包装器即可。然后添加left 50%和top 50%将其带到中心。然后，您必须使用width and height抵消其原始translate transform的一半。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

无需在定位中放置任何绝对值 - 正如其他答案所示 - 您可以使用translate()。

＆＃13;

.loading-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}

.loader {
  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;
}

＆＃13;

<div class="loading-wrapper">
  <div class="loader"></div>
  <h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>

＆＃13;

Answer 3

使用Flexbox here，这是对齐元素的最佳方式。

<!DOCTYPE html>
<html>
<head>
<style>
body{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.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;
  
   display: flex;
   align-self: center;  
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.WebEntTxt {
  color: white;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
</style>
</head>




<body class="Background" background="Background.jpg">
  <div class="loader"></div>
  <!-- <h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1> -->

  <!-- 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>

文本和加载程序不在中间

3 个答案: