当子元素的高度未知时，如何将绝对定位的元素在其父元素中居中

Question

在我的布局中，我试图输出 php 生成的项目。 从数据库中检索到的每个项目都有一个标题、一个图像和一个描述。

我正在尝试生成一个布局，该布局将包含一个缩略图标题，该标题由 img 作为背景（css 样式边框半径：50%）和标题作为中间居中的横幅并占据整个宽度.但是在绝对定位的 div.title 上使用 top 50% 通过顶部边缘居中，并且 div.title 的高度取决于字体大小。

我想知道是否有一种方法可以使标题完美居中，同时考虑到唯一实际已知的尺寸是 div.item 的宽度和所有高度数据，同时保持边框半径效果最终由.thumbnail-wrapper img和.title的font-size

决定

html 是

<div id="container">
  <div class="item">
    <div class="thumbnail-wrapper">
      <img />
      <div class="title">Title</div>
    </div>
    <div class="content">Content</div>
  </div>
</div>

CSS

#container {
    width: 600px;
}

.item {
    position: relative;
    display: inline-block;
    width: 50%;
}

.thumbnail-wrapper {
    text-align: center;
    position: relative;
}

.thumbnail-wrapper img {
    border-radius: 50%;
}

.title {
    width: 100%;
    position: absolute;
    top: 50%; /* this is the problem */
}

谢谢！

JSFiddle example

Answer 1

试试这个 CSS 来使一个绝对定位的元素居中（即添加到div.title）：

/* centering css */
   top: 50%;
   left:50%;
   -webkit-transform:translate(-50%,-50%);
   transform:translate(-50%,-50%);

Updated your JSFiddle Demo

Reference