Javascript 在大于100%的容器中对中div

我需要在大于100%的容器中的视口中居中放置一个div

假设它有160%大，我准备了这把小提琴：

通常我会选择：

  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

但这只有在容器100%大时才有效

它用这个css解决了

  position:absolute;
  top:50%;
  text-align: center;
  transform:translate(0,-50%);
  width: 100vw;

但是大众的

vw

单元在较旧的android浏览器上不起作用，我需要支持它。我不能使用jQuery，也不知道如何用纯javascript将其居中

我尝试将

.div

设置为容器宽度的一半，但div中的文本在视觉上不居中

---

我找不到解决办法。有什么想法吗？谢谢

如果您需要支持较旧的浏览器，您应该使用Javascript来确保它能够正常工作，因为所有CSS解决方案都需要硬编码值

var parent = document.querySelector('.cont-inner'),
    child = parent.querySelector('div');

child.style.left = ((window.innerWidth / 2) - (child.offsetWidth / 2)) + 'px';
child.style.top = ((window.innerHeight / 2) - (child.offsetHeight / 2)) + 'px';

---

示例：

如果我正确理解您的问题，您希望红色的

.div

居中于父容器的左侧100%，该容器的宽度为视图端口的160%

在这种情况下，需要将左偏移调整为100%/160%的50%，即31.25%

body，html{
身高：100%；
}
.续{
宽度：160%；
身高：100%；
背景：火红；
位置：相对位置；
}
.分区{
位置：绝对位置；
最高：50%；
左：31.25%；
转换：翻译（-50%，-50%）；
背景：红色；
填充：50px；/*用于在代码段窗口中演示的较小尺寸*/
}

自闭症

您需要更改left属性

它需要在容器的可见部分的中间。

因为它是160%，所以它是

（100/160）*0.5->31.25%

body，html{
身高：100%；
}
.续{
宽度：160%；
身高：100%；
背景：火红；
位置：相对位置；
}
.分区{
位置：绝对位置；
最高：50%；
左：31.25%；
转换：翻译（-50%，-50%）；
背景：红色；
填充：100px；
}

自闭症

我想用modified

left

属性放置一个答案，但我已经看到了它们，所以这里有一些其他的尝试使用

position:static

将内部div从其父级中释放出来

---

它不会强迫你坚持使用160%。

内部div真的必须嵌套吗？你可以很容易地把它放在更大的div之外，然后根据body元素绝对定位它。你真的需要支持那些旧的浏览器吗？如果你在过去5年里升级了浏览器，你应该会没事的。@MaciejKwas是的，它必须在那里：/在这个容器之外easy@AMACB我妈妈有一个带jellybean的三星s3，她使用默认的android股票浏览器。我爱我的妈妈：）我误解了。现在检查一下。这很聪明，我喜欢！