javascript - 如何水平居中比手机屏幕宽的div？

Question

仅针对移动屏幕，我想要一个比移动屏幕宽且居中的圆形 div 元素。此 div 必须是一个精确的圆。

我有这个JSFiddle但我不能将宽度增加到大于屏幕宽度。

如果高度大于屏幕宽度，我将根据 div 高度计算宽度。否则，宽度应具有大于当前屏幕宽度的最小值。

如果可能的话，我正在寻找仅使用 JavaScript 的解决方案(没有 jQuery)。此问题可能与 this 重复和 this但我特别需要 #circle 元素比屏幕宽，并且使用 position: absolute (如那里的一个答案中所建议的那样)会导致很多困惑.

Answer 1

一个纯CSS的答案应该也可以吧？您可以将这些设置添加到相关元素中:

position: relative;
left: 50%;
transform: translateX(-50%);

https://jsfiddle.net/asn8mv7o/1/