如何响应地在相对 div（图像）上方居中绝对 div（文本）？答案

【问题标题】：How to center absolute div (text) above relative div (image) responsively?如何响应地在相对 div（图像）上方居中绝对 div（文本）？
【发布时间】：2014-09-10 21:44:55
【问题描述】：

我正在使用 Twitter Bootstrap 构建一个模板，并尝试使文本在图像上方水平和垂直居中，例如：

我正在尝试这个：

<div class="container"> <!--Bootstrap-->
  <div class="row"> <!--Bootstrap-->
    <div class="col-md-4"> <!--Bootstrap-->

        <div class="box">
           <div class="thumb"><img src="..."></div>
           <div class="title">Post title</div>
        </div>

    </div> <!--Bootstrap-->
  </div> <!--Bootstrap-->
</div> <!--Bootstrap-->

.box {height:350px; width:100%; border:4px solid #fff;}
.thumb {position:relative; width:100%; height:100%; overflow: hidden;}
.thumb img{width:100%; height:100%; overflow: hidden;}
.title {position:absolute;}

有了这个，如果我使用一些值 top 到 div title 它会出现在 img 上方，但我无法将其水平或垂直居中。

到目前为止，我搜索的所有内容都不起作用：left:50%, left:0 和 right:0; margin:auto 等等...

我也不打算将 img 用作 css 背景。

我怎样才能做到这一点？

【问题讨论】：

你能在这个项目中使用display:table-cell吗？
我尝试使用 display:table 到 thumb div 和 display:table-cell 加上 vertical-align:middle 到 title div，但是没有用

标签： html css twitter-bootstrap center absolute

【解决方案1】：

您当前的代码不起作用，因为您没有应用 top:0 和 width:100% 或 left 和 right 值。您还需要将position:relative 添加到box，以便正确放置绝对定位的标题。我建议将可变高标题居中是使用display:table-cell。唯一的问题（除了兼容性）是它还需要添加另一个元素（一些围绕.title 文本的包装元素）。你可以在这里看到这个解决方案：http://jsfiddle.net/dx44c/3/

表格单元格的兼容性：http://caniuse.com/#search=table

必需的标记：

    <div class="box">
        <div class="thumb"><img src="//lorempixel.com/712/342"></div>
        <div class="title"><div>Post title</div></div>
    </div>

所需的 CSS：

.box {position: relative; height:350px; width:100%; border:4px solid #fff;}
.thumb {position:relative; width:100%; height:100%; overflow: hidden;}
.thumb img{width:100%; height:100%; overflow: hidden;}
.title {
    position:absolute;
    background: rgba(0,0,0,0.5);
    color: white;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
}
.title div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20%;
}

编辑：在table-cell 上添加了更多文本和一些填充的更好示例

【讨论】：

谢谢，成功了！但我猜是因为.title 上的width:100% 和height:100%，我无法在.thumb img 上使用不透明悬停效果（因此，.thumb img:hover）。有办法吗？
我会改用.box:hover .thumb img。看起来您不需要支持 IE 6，所以我认为我们可以排除它不是具有 :hover 规则的锚的问题。 :P 编辑：这是一个例子。 jsfiddle.net/dx44c/4

【解决方案2】：

要将标题水平居中，只需给出 .title text-align: center;使位置相对并给出底部 60%；如下图：

<head>
<style>
.box {position:relative; height:350px; width:100%; border:4px solid #fff;}
.thumb {position:relative; width:100%; height:100%; overflow: hidden;}
.thumb img{width:100%; height:100%; overflow: hidden;}

.title {position:relative; 
font-weight: bold; 
bottom: 60%;
color: white; 
text-align: center;
padding: 0px 10px;
width: 97%;
}

</style>
</head>
<body>
<div class="container"> <!--Bootstrap-->
  <div class="row"> <!--Bootstrap-->
    <div class="col-md-4"> <!--Bootstrap-->

        <div class="box">
           <div class="thumb"><img src="http://cache.graphicslib.viator.com/graphicslib/media/a8/sunset-cruise-on-the-sydney-harbour-photo_5361064-fit468x296.jpg"></div>
           <div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>

    </div> <!--Bootstrap-->
  </div> <!--Bootstrap-->
</div> <!--Bootstrap-->
</body>

【讨论】：

【解决方案3】：

CSS Flexbox 是垂直居中的另一个选项。

演示：http://jsfiddle.net/cQ5GG/（如果需要，添加额外的供应商前缀）

<style>
.thumb {
    width: 400px;
    height: 200px;
    display: -webkit-flex;
    display: flex;
}

.caption {
    margin: auto;
    text-align: center;
    color: #fff;
    font: bold 16px/150% Arial,sans-serif;
}
</style>

<div class="thumb" style="background: url(http://css-tricks.com/wp-content/csstricks-uploads/transpBlack50.png), url(http://lorempixel.com/400/200/)">
    <div class="caption">
        This is my caption<br>
        Multiple lines<br>
        For example...
    </div>
</div>

【讨论】：