Question

我需要将视口中的div放在一个大于100％的容器中。

假设它的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中的文字并没有在视觉上居中。

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

Answer 1

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

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

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

Answer 2

您需要更改左侧属性。

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

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

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

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

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

它并没有强迫你坚持使用160％。

将div放在容器大于100％的中心

4 个答案: