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

问题描述

我试图让蓝色容器在粉红色的中间，但是看起来 vertical-align：middle; 在这种情况下不做这项工作。 p>

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

结果：

期望：

>

请建议我如何实现。

Jsfiddle

$ b $首先需要注意的是， vertical-align 只适用于表格单元格和行内元素。

有几种方法来实现垂直对齐，这可能满足或可能不满足您的需求。不过，我会告诉您两个 方法从我的收藏夹：

1。使用转换和顶部

  .valign {position：relative; top：50％; transform：translateY（-50％）; / *由于简洁而省略的供应商前缀* /}  

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

是 top 的百分比值相对于包含块的 height ;虽然 transform 的百分比值是相对于框本身的大小（边界框）。

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

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

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

其中一个有其父级的 height ， 100％，另一个是我们期望的元素

  .parent {text-align：left; position：absolute; height：56px;背景颜色：粉色; white-space：nowrap; font-size：0; / *删除内联元素之间的间隙* /}。dummy-child {height：100％; } .valign {font-size：16px; / *重新设置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 =valignstyle =background-color：lightblue;> test< / div> < / div>< / div>  

应该使用可用方法之一来消除inline-级元素。

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

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的垂直中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！