在大于 100% 的容器中居中 div答案

【问题标题】：centering a div in a container larger than 100%在大于 100% 的容器中居中 div
【发布时间】：2016-05-17 06:45:34
【问题描述】：

我需要在大于 100% 的容器中将视口中的 div 居中。

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

https://jsfiddle.net/mz0bbz14/2/

通常我会选择：

  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 单元不适用于旧的安卓浏览器，我需要支持它。我不能使用 jQuery，也不知道如何用纯 javascript 将其居中。

我尝试将.div 设置为容器宽度的一半，但 div 内的文本在视觉上没有居中。

我找不到解决方案。有任何想法吗？谢谢

【问题讨论】：

内部div真的要嵌套吗？您只需将其放在较大的 div 之外即可轻松放置，然后根据 body 元素将其绝对定位。
您真的需要支持那些旧浏览器吗？如果您在过去 5 年内升级过浏览器，应该没问题。
@MaciejKwas 是的，它必须在那里：/ 在那个容器之外很容易
@AMACB 我妈妈有一个带果冻豆的三星 s3，她使用默认的安卓股票浏览器。我爱我妈妈:)

标签： javascript css centering

【解决方案1】：

如果您需要支持较旧的浏览器，您应该使用 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';

示例：https://jsfiddle.net/9syvq2r2/

【讨论】：

我误会了。立即检查。

【解决方案2】：

如果我正确理解您的问题，您希望红色的.div 居中在宽度为视口 160% 的父容器的左侧 100% 处。

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

body,html {
  height: 100%;
}
.cont-inner {
  width:160%;
  height: 100%;
  background: hotpink;
  position:relative;
}

.div {
  position:absolute;
  top:50%;
  left: 31.25%;
  transform:translate(-50%,-50%);
  background:red;
  padding:50px; /* smaller size for demo in snippet window */
}

<div class="cont-inner">
  <div class="div">
    asd
  </div>
</div>

【讨论】：

【解决方案3】：

你需要改变left属性。

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

既然是160%，那就是

(100 / 160) * 0.5 -> 31.25%

body,html {
  height: 100%;
}
.cont-inner {
  width:160%;
  height: 100%;
  background: hotpink;
  position:relative;
}

.div {
  position:absolute;
  top:50%;
  left:31.25%;
  transform:translate(-50%,-50%);
  background:red;
  padding:100px;
}

<div class="cont-inner">
  <div class="div">
    asd
  </div>
</div>

;

【讨论】：

【解决方案4】：

我想用修改后的left 属性放置一个答案，但我已经看到它们了，所以这是position:static 从其父级释放内部 div 的其他尝试

https://jsfiddle.net/mz0bbz14/9/

它不会强迫你坚持 160%。

【讨论】：

这很聪明，我喜欢！