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

Question

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

假设它有 160% 大，我准备了这个 fiddle:

通常我会选择：

  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 中的文本在视觉上没有居中。

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

Answer 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/

Answer 2

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

在这种情况下，您需要将左偏移量调整为 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>

Answer 3

你需要换左边属性。

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

因为是 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>

;

Answer 4

我想用修改过的 left 属性放置一个答案，但我已经看到它们了，所以这里有一些其他的尝试 position:static 从它的 div 中释放内部 div parent

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

它只是不强迫你坚持 160%。

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

centering a div in a container larger than 100%

javascript

css

centering