如何在页面中水平和垂直居中微调器？ [复制]

Posted 2023-03-05

【中文标题】如何在页面中水平和垂直居中微调器？ [复制]

【英文标题】：How to center a spinner horizontally and vertically in page? [duplicate]

【发布时间】：2018-08-28 03:43:25

【问题描述】：

我有一个模拟小型微调器的div 块，一切正常，但是使用我拥有的位于右上翼的css 配置，我试图将它居中，但是当我从一个移动设备它从一个地方移动......如何在不改变不同尺寸设备的位置的情况下将其居中？

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

【参考方案1】：

由于它是固定的，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 widht */

替代方案，由 Utkanos 在 cmets 中给出

.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 */

【讨论】：

或者对于绝对居中，在left 上使用calc()，即calc(50% - (50px / 2))，其中50px 是元素的宽度。 top 也是如此。

@Utkanos 的解决方案对我不起作用，但第一个解决方案对我有用。我正在使用电子

【参考方案2】：

如果您希望微调器覆盖整个视口：

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

【讨论】：

这很好，谢谢

【参考方案3】：

只需尝试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>

【参考方案4】：

试试这个以获得所有尺寸的中心位置

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