javascript - 如何在所有浏览器和设备上将网页上的某些元素居中？

Question

我有一些元素、div 或任何带有 id 的元素，我想将它放在网页的中心。 但是当它在电脑屏幕上看起来不错时，在手机上看起来很糟糕。 如何正确地居中它，使用任何框架，如 Bootstrap 或其他东西，或者没有任何方法，jquery 也是可能的。 它在所有移动设备和所有计算机浏览器上看起来也不错。 谢谢。

Answer 1

我会给你另一种定位在绝对中心(水平和垂直)的解决方案，它永远不会失败，并且适用于我测试过的所有浏览器(即 8+)。

你有HTML

<div id="centered">
   <!-- Place your content here -->
</div>

这是绝对中心(水平和垂直)的CSS:

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

这里是如果你只想要垂直:

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  right:0;
  left:0;
  margin:auto;
}

并且只有水平:

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}