位置の項目を中心に

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タグを使用してきたように、単に関係なく高さ

が何であれ、垂直中央できなくなります両方の性質をdiv要素を持つこの

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

ようtop財産とtransformプロパティを使用します

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