垂直居中，絕對位置，多個元素

Question

我正在使用以下方法在具有未知高度的div中垂直居中未知高度的元素。

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

說我爲中心的元素是錨標記，所以這個答案解決了位置相對問題。

When to use position absolute vs position relative when vertically aligning with css

但是因爲我旁邊的另一種元素，使用position:absolute

有沒有辦法，我可以解決這個問題的任何方式，當它們重疊？ （我不能用Flexbox的）

HTML：

<div class"parent-container"> 
    <a href="">Some content</a> 
    <a href=""><img src""></a> 
</div> 

CSS

.parent-container { 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

.parent-container a { 
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
} 

Answer 1

使孩子們inline-block的，並使用vertical-align:middle。無需定位。

a { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 
.parent-container { 
 
    text-align: center; 
 
    background:palegoldenrod 
 
}

<div class="parent-container"> 
 
    <a href="">Some content</a> 
 
    <a href=""> 
 
    <img src="http://www.fillmurray.com/140/100"> 
 
    </a> 
 
</div>

如果包含的母公司是不是可以用一個僞元素的含量較高。

a { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.parent-container { 
 
    text-align: center; 
 
    height: 150px; 
 
    background: pink; 
 
} 
 
.parent-container::before { 
 
    content: ''; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-right: -0.25em; 
 
    /* Adjusts for spacing */ 
 
}

<div class="parent-container"> 
 
    <a href="">Some content</a> 
 
    <a href=""> 
 
    <img src="http://www.fillmurray.com/140/100"> 
 
    </a> 
 
</div>