将项目放在中心

Question

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

我有一个滑块，我想在中间显示一些文本，如下所示：

问题是，我无法强制它与图像垂直居中对齐。这是我的 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/

将项目放在中心

position item in a center

html

css

slider