CSS - 垂直画像

Question

上のdivを中心I次のHTMLを持っている：.button-leftは常に画像の中心になるために私が達成したい何

<div class='container'> 
    <img src="http://lorempixel.com/400/400" /> 
    <div class='button-left'><</div> 
    </div> 

があり、どんなに画像サイズ、代わりにdivは私のhtml要素に従って配置されます。

これは私のCSSです：

.container img { 
    position: relative; 
} 
.button-left { 
    position: absolute; 
    top: 50%; 
    background-color: red; 
} 

は、相対位置する画像に応じて.button-left divの位置べきではないのですか？

あなたはライブデモを試してみたい場合にはJsBin： あなたがイメージにコンテナにposition: relativeを設定していないする必要がhttps://jsbin.com/cuwaguyiza/edit?html,css,output

Answer 1

。 また、ボタンを上に翻訳することをお勧めします。したがって、完全に中央に配置されています。

.container { 
    position: relative; 
} 

.button-left { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 2

使用しない場合は、positionを使用しないでください。

1. フレックスボックス。

   .container { 
    
       display: flex; 
    
       align-items: center; 
    
   }

   <div class='container'> 
    
       <img src="http://lorempixel.com/400/400"> 
    
       <div class='button-left'>Lorem</div> 
    
   </div>

2. 行の高さ（Uテキストはシングルラインの場合）

.container img { 
 
    vertical-align: middle; 
 
} 
 

 
.button-left { 
 
    display: inline-block; 
 
    line-height: 400px; 
 
}

<div class='container'> 
 
    <img src="http://lorempixel.com/400/400"><!-- dont delete this comment 
 
--><div class='button-left'>Lorem</div> 
 
</div>

Answer 3

.container img { 
    position: relative; 
} 
.button-left { 
    left: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background-color: red; 

} 

OR

.container img { 
    position: relative; 
    display: block; 
    margin: 0 auto; 
}