如何响应地在相对 div（图像）上方居中绝对 div（文本）？
Posted
技术标签:
【中文标题】如何响应地在相对 div（图像）上方居中绝对 div（文本）？【英文标题】：How to center absolute div (text) above relative div (image) responsively? 【发布时间】：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 imgwidth: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，但是没有用
【参考方案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 imgwidth: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 imgwidth: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>
【讨论】：
以上是关于如何响应地在相对 div（图像）上方居中绝对 div（文本）？的主要内容，如果未能解决你的问题，请参考以下文章