垂直居中，绝对位置，多个元素

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>