如何将div垂直居中放置在绝对定位的父div内?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (45)

在粉红色的容器中取得蓝色容器,但vertical-align: middle;在这种情况下看起来并不适合。

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

结果:

期望:

如何实现这一目标?

提问于
用户回答回答于

vertical-align这只适用于表格单元格和内联级别的元素。

1.使用transformtop

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
	<div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
		<div class="valign" style="background-color: lightblue;">test</div>
	</div>
</div>

关键在于百分比值top是相对于height包含块的百分比值; transforms 上的百分比值与div本身的大小(边界框)相关。

如果遇到字体呈现问题(模糊的字体),则修补程序将添加perspective(1px)transform声明中,以使其变为:

transform: perspective(1px) translateY(-50%);

值得注意的transform 是,IE9 +支持 CSS 。

2.使用inline-block(伪)元素

在这种方法中,我们有两个兄弟inline-block元素通过vertical-align: middle声明在中间垂直对齐。

其中一人拥有height100%其父的,另一种是我们谁我们想在中间对齐所需的元素。

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}

<div style="position: absolute; left: 50px; top: 50px;">
	<div class="parent">
        <div class="dummy-child"></div>
		<div class="valign" style="background-color: lightblue;">test</div>
	</div>
</div>
用户回答回答于

用这个:

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

扫码关注云+社区

领取腾讯云代金券