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

Question

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

我正在尝试生成一个布局，该布局将包含一个缩略图标题，该缩略图标题由作为背景的 img(css 样式 border-radius:50%)和标题作为横幅居中并占据整个宽度.但是在绝对定位的 div.title 中心使用顶部边缘的前 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