如何在绝对定位的父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

Jsfiddle

8 个解决方案

#1

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

关键是顶部的百分比值相对于包含块的高度;而转换的百分比值相对于box本身的大小(边界框)。

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

如果您遇到字体渲染问题(模糊字体)，解决方法是向转换声明中添加透视图(1px)，使其变为:

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

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

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

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.

在这个方法中，我们有两个兄弟的inline-block元素，它们垂直排列在中间的垂直对齐:中间声明。

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.

其中一个的高度是父元素的100%另一个是我们想要的元素我们想把它对齐到中间。

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

最后，我们应该使用一种可用的方法来消除inline-level元素之间的差距。

#2

use this :

用这个:

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

refer this link: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

请参考这个链接:https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

#3

Use flex blox in your absoutely positioned div to center its content.

使用flex blox在您的不完全定位的div中为其内容提供中心。

See example https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

看到https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview的例子

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

#4

Center vertically and horizontally:

中心垂直和水平:

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

#5

You may use display:table/table-cell;

您可以使用显示:表/表格单元;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}

<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>

#6

Please check this answer to a similar issue.

请检查这个问题的答案。

This is by far the easiest way I have found.

这是迄今为止我发现的最简单的方法。

https://*.com/a/26079837/4593442

https://*.com/a/26079837/4593442

NOTE. I used display: -webkit-flex; instead of display: flex; for testing inside safari.

请注意。我曾经显示:-webkit-flex;而不是显示:flex;测试在safari。

FOOTNOTE. I am a novice only, sharing help from someone who is clearly experienced.

脚注。我只是个新手，分享经验丰富的人的帮助。

#7

Here is simple way using Top object.

下面是使用Top对象的简单方法。

eg: If absolute element size is 60px.

如果元素的绝对值是60px。

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

#8

An additional simple solution

另一个简单的解决方案

HTML:

HTML:

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

---

CSS:

CSS:

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}