Question

JS小提琴：fiddle，这是代码：

＆＃13;

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

＆＃13;

<div class="loader"></div>

＆＃13;

如何将其水平放置？垂直？

我试过了：

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

但transform:translate(-50%,-50%);不起作用

Answer 1

将以下css提供给.loader类：

  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;

＆＃13;

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

＆＃13;

<div class="loader"></div>

＆＃13;

Answer 2

您可以将其设为position:absolute;

并给予它：

top:0;
left:0;
right:0;
bottom:0;

使其垂直和水平对齐到中间。

＆＃13;

body {
  overflow:hidden;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

＆＃13;

<div class="loader"></div>

＆＃13;

Answer 3

有几种方法可以做到。

使用flexbox。这适用于页面上任何位置的任何容器。

body {  /* or some wrapper, if you plan to have other things in body */
  min-height: 100vh; /* this just expands the body height so the vertical alignment is visible in the snippet */
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="loader"></div>

使用position: absolute。这使div相对于文档居中，而不是加载器的父元素。

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;

  /* i added this: */
  position: absolute;
  left: calc(50% - 120px / 2); /* 50 % of body width minus half of .loader size… */ 
  top: calc(50% - 120px / 2);  /* …and the same thing with height */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="loader"></div>

Answer 4

请添加body {height: 100vh;}并更新装载程序div的css，如下所示：

.loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

https://jsfiddle.net/7baw2rmp/

Answer 5

使用CSS将元素置于中心的最简单方法是使用flexbox。不需要黑客攻击。

如果需要使用display: flex设置父容器。

<div class="container">
   <div class="item">
      Aligned Item
   <div>
</div>

CSS：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  width: 200px;
  height: 200px;
}

所有类item的元素都将集中对齐。

可在

找到更多详情

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

如何居中div（CSS加载器）

5 个答案: