如何在绝对定位的父 div 内垂直居中 div [英] How to center div vertically inside of absolutely positioned parent div

问题描述

我正在尝试将蓝色容器放在粉红色容器的中间，但是在这种情况下 vertical-align: middle; 似乎不起作用.

结果:

预期:

请建议我如何实现这一目标.

Jsfiddle

解决方案

首先要注意 vertical-align 仅适用于表格单元格和行内级元素.

有几种方法可以实现垂直对齐，它们可能满足也可能不满足您的需求.不过我会告诉你两个 我最喜欢的方法:>

1.使用 transform 和 top

.valign {位置:相对；顶部:50%；变换:translateY(-50%);/* 由于简洁，省略了供应商前缀 */}

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

关键是top上的百分比值是相对于包含块的height；而 transform 上的百分比值是相对于框本身(边界框)的大小.

如果您遇到 字体渲染问题(字体模糊)，修复方法是将 perspective(1px) 添加到 transform 声明中，使其变为:

transform: 透视(1px) translateY(-50%);

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

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

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

其中一个的 height 是其父元素的 100%，另一个是我们想要将其居中对齐的元素.

.parent {文本对齐:左；位置:绝对；高度:56px；背景颜色:粉红色；空白:nowrap；字体大小:0；/* 移除内联级元素之间的间隙 */}.dummy-child { 高度:100%；}.valign {字体大小:16px；/* 重新设置字体大小 */}.dummy-child，.valign {显示:内联块；垂直对齐:中间；}

<div class="parent"><div class="dummy-child"></div><div class="valign" style="background-color: lightblue;">test</div>

最后，我们应该使用可用方法之一删除行内元素之间的间隙.

I am trying to get blue container in the middle of pink one, however seems vertical-align: middle; doesn't do the job in that case.

<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>

Result:

Expectation:

Please suggest how can I achieve that.

Jsfiddle

解决方案

First of all note that vertical-align is only applicable to table cells and inline-level elements.

There are couple of ways to achieve vertical alignments which may or may not meet your needs. However I'll show you two methods from my favorites:

1. Using transform and top

.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>

The key point is that a percentage value on top is relative to the height of the containing block; While a percentage value on transforms is relative to the size of the box itself (the bounding box).

If you experience font rendering issues (blurry font), the fix is to add perspective(1px) to the transform declaration so it becomes:

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

It's worth noting that CSS transform is supported in IE9+.

2. Using inline-block (pseudo-)elements

In this method, we have two sibling inline-block elements which are aligned vertically at the middle by vertical-align: middle declaration.

One of them has a height of 100% of its parent and the other is our desired element whose we wanted to align it at the middle.

.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>

Finally, we should use one of the available methods to remove the gap between inline-level elements.

这篇关于如何在绝对定位的父 div 内垂直居中 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！