将绝对定位的 DIV 置于较小容器 DIV 中的 CSS 解决方案答案

【问题标题】：CSS Solution to centring an absolutely positioned DIV inside a smaller container DIV将绝对定位的 DIV 置于较小容器 DIV 中的 CSS 解决方案
【发布时间】：2016-11-13 03:48:41
【问题描述】：

是否可以将具有绝对定位的 DIV 水平和垂直居中在包含 div 内（相对定位）。

想象一个图像是其包含 div 的高度和宽度的两倍，但包含在 div 中。与其只显示从左上角开始的一半图像，不如在没有 JS 的情况下显示图像的中间。

CSS，

.container {
    width:300px;
    height:200px;
    position:relative;
    overflow:hidden;
}

.container > img {
    width:600px;
    height:400px;
    position:absolute;
}

根据这个 CSS 示例，你可以说 top:-100px; left:-150px; 但是如果我们不知道 img 的大小。

【问题讨论】：

css-tricks.com/centering-in-the-unknown
将图像设置为
的background-image 并以这种方式垂直和水平居中对齐？

标签： html css css-position

【解决方案1】：

如果您绝对将一个 div 定位在另一个 div 中，您只能将其精确居中，即计算出两个 div 宽度之间的差异，将其除以 2 并将其作为您的左右边距。如果要动态居中（例如，如果内部 div 的大小可能发生变化），则必须相对定位。

【讨论】：