1. 首页
  2. 问题
  3. 如何在绝对定位的父 div 内垂直居中 div
小编典典

如何在绝对定位的父 div 内垂直居中 div

all

我正在尝试将蓝色容器放在粉红色容器的中间，但是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>

结果：

在此处输入图像描述

期待：

在此处输入图像描述

请建议我怎样才能做到这一点。

提琴手


阅读 133

收藏
2022-07-04

共1个答案

小编典典

首先请注意，vertical-align仅适用于表格单元格和内联级元素。

有几种方法可以实现垂直对齐，它们可能会也可能不会满足您的需求。但是，我将向您展示我最喜欢
方法：

1.使用transform和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>

关键是on的百分比值top是相对于height包含块的；而transforms 上的百分比值与框本身（边界框）的大小有关。

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

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

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

2. 使用inline-block（伪）元素

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

其中一个有一个heightof100%其父元素，另一个是我们想要的元素，我们希望将其对齐在中间。

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

最后，我们应该使用一种可用的方法来消除行内元素之间的间隙。

2022-07-04