如何在页面中水平垂直居中一个旋转器？

Question

如何在页面中水平垂直居中一个旋转器？

11

我有一个模拟小型旋转器的 div 块，一切都运行良好，但是由于我之前设定的 css 配置，它位于右上角。我尝试过将其居中，但在移动设备上查看时它会移到其他位置..如何在不改变在不同大小的设备上的位置的情况下将其居中？

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

- FeRcHo

4个回答

9

如果您希望旋转器覆盖整个视窗：

.spinner {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 50px no-repeat;
}

<div class="spinner"></div>

如果您希望它只有gif/svg的大小：

.spinner {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath d='M28.43 6.378C18.27 4.586 8.58 11.37 6.788 21.533c-1.791 10.161 4.994 19.851 15.155 21.643l.707-4.006C14.7 37.768 9.392 30.189 10.794 22.24c1.401-7.95 8.981-13.258 16.93-11.856l.707-4.006z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

<div class="spinner"></div>

- Stickers

这非常棒，谢谢。 - NicholasKyleHoffman

8

尝试使用transform和top、left等位置组合...

注意：这里只是为了演示而使用了font-awesome字体图标。

.spinner {
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>

- Bhuwan

5

尝试以下方法以在所有尺寸上获得居中位置。

.spinner{
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

- Iniamudhan

很棒的解决方案，非常适用于Bootstrap，并且它以动画方式呈现旋转器，而不是使用translate方法。 - Aaron Meese

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GreyRoofPigeon · Accepted Answer

由于它是固定的，top|left|right|bottom 属性是相对于窗口的。因此，在此情况下，以百分比表示的位置，例如50％，应该就可以解决问题了。

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: -..px; /* half of the elements height */
  margin-right: -..px; /* half of the elements width */
}

在评论中提供的备选方案，由Utkanos提供

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */
  right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */
}