垂直居中，绝对定位，多元素

Question

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

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-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

制作 children 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>

如果包含 parent 的内容高于您可以使用 pseudo-element 的内容。

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>

垂直居中，绝对定位，多元素

Vertically centering, absolute position, multiple elements

html

css

css-position

vertical-alignment