如何在絕對定位的父 div 內垂直居中 div

Question

我試圖將藍色容器放在粉紅色容器的中間，但似乎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>

結果：

期待：

請建議我如何實現這一目標。

提琴手

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

關鍵是top的百分比值是相對於包含塊的height ； 雖然transform s 上的百分比值與框本身（邊界框）的大小有關。

如果您遇到字體渲染問題（字體模糊），修復方法是將perspective(1px)添加到transform聲明中，使其變為：

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

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

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

在這個方法中，我們有兩個兄弟inline-block元素，它們通過vertical-align: middle聲明在中間vertical-align: middle 。

其中一個的height是其父元素的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>

最后，我們應該使用一種可用的方法來消除內聯級元素之間的間隙。

Answer 2

用這個 ：

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

請參閱此鏈接： https : //www.smashingmagazine.com/2013/08/absolute-horizo​​ntal-vertical-centering-css/

Answer 3

在絕對定位的 div 中使用 flex blox 使其內容居中。

參見示例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;
}

Answer 4

垂直和水平居中：

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

Answer 5

您可以使用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>

Answer 6

這是使用 Top 對象的簡單方法。

例如：如果絕對元素大小為 60px。

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

Answer 7

一個額外的簡單解決方案

HTML：

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

---

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

Answer 8

請查看類似問題的答案。

這是迄今為止我找到的最簡單的方法。

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

注意。 我用過display：-webkit-flex; 而不是顯示：flex; 在野生動物園內進行測試。

腳注。 我只是一個新手，與經驗豐富的人分享幫助。

Answer 9

你可以通過使用display:table;來做到這一點display:table; 在父 div 中並display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; 在子div中

 <div style="display:table;"> <div style="text-align: left; height: 56px; background-color: pink; display: table-cell; vertical-align: middle;"> <div style="background-color: lightblue; ">test</div> </div> </div>

Answer 10

僅用於垂直中心

 <div style="text-align: left; position: relative;height: 56px;background-color: pink;"> <div style="background-color: lightblue;position:absolute;top:50%; transform: translateY(-50%);">test</div> </div>

我總是喜歡這樣，這是一個非常簡短且易於水平和垂直居中的代碼

 .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div class="center">Hello Centered World!</div>