html - 将元素放在中心

Question

我有一个非常简单的问题，但我不知道如何解决。

我有一个 slider ，我想在中间显示一些文本，如下所示:

问题是，我无法强制它与图像垂直居中对齐。这是我的 CSS:

.caption {
    position: absolute;
    height: auto;
    text-align: center;
    zoom: 1;
    color: white;
    display:table;
    left:20%;
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 10px 0;
    background:rgba(138, 138, 138, 0.55);    
}

我做错了什么？

Answer 1

因为您已经使用了 position 标签，这非常好，只需像这样使用 top 属性和 transform 属性

.caption {
    position: absolute;
    height: auto;
    text-align: center;
    zoom: 1;
    color: white;
    display:table;
    left:20%;
    top:50%;
    transform:translate(0,-50%);
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 10px 0;
    background:rgba(138, 138, 138, 0.55);    
}

With both properties div will be vertically center no matter whatever is the height

示例:https://jsfiddle.net/y2z94ez3/