Question

这似乎不应该是一个困难的问题，但我想不出一个可行的解决方案。

我希望从页面左侧有一个div超出其父容器（使用Bootstrap 3，因此是一个1170px的最大宽度容器）。在其中，我需要另一个居中的容器，因此其中的文本和按钮不会超过1170px。

以下是我需要实现的截图：

编辑：我认为我并不像我想要的那样清楚。在文本后面的白色div上的绝对定位只是为了将div扩展到容器之外，延伸到窗口的左侧，但这并不重要。目标只是将文本和按钮保持在居中的容器中，但文本和按钮周围的白色div延伸到窗口的左侧。我编辑了这个问题，使其更加清晰。

无论如何，我想出了一个有效的简单方法。我刚刚用过：

margin-left: -9999px
padding-left: 9999px

在白色div上保持向左延伸，不使用绝对定位。对我来说它似乎仍然不正确，但工作正常。

Answer 1

将子div设置为

＆＃13;

div.parent {
position:absolute;
background:#ccc;
left:0;
height:100%;
width:100%;
}

div.child {
position: relative;
left: 25%;
background: #fff;
width: 50%;
height: 50%;
top: 25%;
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

您必须根据自己的喜好调整高度/宽度并更改上/下百分比。关键是有一个相对容器在绝对值

之内

Answer 2

如果你知道子容器的宽度并想要

将div水平居中，执行

position: relative;
left:50%;
margin-left:-childContainerWidth/2;

或将div居中，做

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

如果是以未知宽度/高度为中心的情况，您可以试试guide

将div扩展到父容器，同时将子div保留在容器中

2 个答案: