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

FeRcHo 发表于 Dev

费乔

我有一个div模拟小型旋转器的模块，但一切正常，但是在css我将其配置在右上翼的情况下，我试图将其居中，但是当我从移动设备上看到它时，它会从原处移动..可以在不改变尺寸的情况下将其居中放置？

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

链接

由于它是固定的，因此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在评论中给出

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。