css - 无论分辨率如何，如何使 div 元素居中

Question

我有一个以百分比边距为中心的 div 元素:

即。 左:30%；

问题是在较大的分辨率下这会变得不对齐且难看。

如何仅使用 CSS 的窗口计算方法来保持我的 div 元素在所有分辨率下始终准确居中？

请注意:元素的位置是固定的!

Answer 1

这将使您的元素在任何屏幕分辨率下始终居中。

.centered {
      position: fixed;
      left: 50%;
      top:50%;
      transform: translateX(-50%, -50%);
  }

<div class="centered">center</div>