在中心的位置项目

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);    
}

  

无论高度如何，两个属性div都将垂直居中

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