响应式 div 中的绝对垂直和水平居中文本

Question

我真的很难弄清楚这个问题 - 我正在尝试在悬停时显示在图像上方的响应式 div 中垂直和水平文本。

这是基本 HTML 和 CSS 结构的 jsfiddle。

Here's an example of what I'm attempting to do.

我尝试了很多不同的 CSS 方法 - 使用 table（这不起作用，因为我使用 absolute 将文本放在图像上方，transform: translate(-50%, -50%); top: 50%; left: 50%; 抵消了文本，还有其他我现在不记得的。

主要问题是我有两个 "layers" - 文本和下面的图像。为此，我需要使用 absolute，这会导致 table 选项不起作用。

如果您有任何建议，我将不胜感激。

注意：我使用的图像必须保持 16:9 纵横比。

谢谢！

Answer 1

http://jsfiddle.net/jruvcogm/

.work{
    display:table;
}    
.work a{
    position:relative;display:table;
}    
.work h1{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0;
    width:80%;
    text-align:center;
}    
.work img{
    width:800px;
    height:450px;
    display:block;
    max-width:100%;
}

Answer 2

发布 css 水平居中代码 and/or 垂直居中纯 css （改编自我的 responsive.css 脚本）。包括对在线资源的引用。根据需要使用。注意对于某些情况，您可能需要稍微调整 html 结构以包含包装器（参见评论）

/* center alignment classes */
/* http://www.dev-metal.com/center-div-vertically-horizontally-modern-method-without-fixed-size/ */
.center-vertical-wrapper
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table;
}
.center-horizontal-wrapper
{
    margin: 0;
    padding: 0;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.center-h
{
    margin-left: auto;
    margin-right: auto;
}
.center-contents-h
{
    text-align: center;
}
/* http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height */
.center-absolute /* needs width/height to be set */
{
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    float:left;
    margin: auto;
}
.center-transform /* needs width/height to be set */
{
    position: absolute;
    margin: auto;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
/* http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ */
.center-flexbox 
{
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
    display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
    align-items: center;
    justify-content: center;

    margin: 0;
    height: 100%;
    width: 100% /* needed for Firefox */
}

Answer 3

我得到了一个工作示例：https://jsfiddle.net/v1harbqm/7/

我基于@gopalraju 的fiddle。它在 Safari 中不起作用，但是 display: table; 和向标题添加高度的组合起作用。

编辑：在标题中创建了一个 <span> 以使其可以处理更长的文本。这次使用翻译，看起来 Safari 仍然需要 -webkit- 前缀，所以这可能是最初的问题。

无论如何，这是更新的：https://jsfiddle.net/v1harbqm/13/

响应式 div 中的绝对垂直和水平居中文本

Absolute vertical and horizontal center text in responsive div

html

javascript

css

jquery

center