在较小的div中居中溢出的div

Question

我有一个id为#container的div，里面还有一个id为#content的div。#content div的大小比#container div大，我需要将其水平和垂直居中在#container div内。

<div id="container">
    <div id="content">

    </div>
</div>

我尝试过的CSS如下。

#container {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
#content {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

尽管此示例中div的大小是静态值，但高度会随时更改，因此需要一种动态解决方案。

- Rasmus Nørskov

---

元素的大小是否使用百分比设置？ - web-tiki

你可以使用脚本（JavaScript 或 jQuery）吗？ - JRulle

我不确定我能想象出这个的用例。这个结构和定位的目的是什么？ - Paulie_D

你不能在容器上加上100像素的填充来解决你的问题吗？ - BiAiB

Answer 1

你可以将它们绝对定位，然后使用CSS3变换将它们拖回到原位。 JSfiddle演示 CSS

#container {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: #663399;
}
#content {
    height: 400px;
    width: 400px;
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color: rgba(255,0,0,0.5);
}

- Paulie_D

---

很棒的解决方案@paulie_D。只需要将#content绝对定位即可... #container可以使用position: relative;保持在文档流中。 - JRulle

True...允许额外的边距等，这可能会使它稍微不那么动态，因为边距值需要计算（我认为）。然而，我假设居中是一个要求，但是，坦率地说，我并不认为这种结构/效果有实际意义。 - Paulie_D

我可以看到在容器上使用overflow: hidden;来强制一系列图像符合特定大小（如正方形），而不留白或挤压/拉伸 - 也许是用于作品集网站或缩略图等。 - JRulle

嗯，我想我会选择JS/JQ而不是那种方式。 :) - Paulie_D

@Paulie_D 谢谢，这个链接帮助我在表格中创建了垂直居中的文本：https://jsfiddle.net/gw1fu6op/ - ragnaroh