CSS-将div在图像上垂直居中

Question

我有以下html：

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

我想实现的是，无论图像大小如何， .button-left始终位于图像的中心，但是div根据我的html元素定位。

这是我的CSS：

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

.button-left div的位置是否不应该根据相对定位的图像？

如果您想尝试现场演示， 请使用 JsBin： https ://jsbin.com/cuwaguyiza/edit?html,css,output

Answer 1

您必须设置position: relative对于容器而不是图像。 另外，我建议将按钮向上平移，使其完全居中。

.container {
    position: relative;
}

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

Answer 2

不需要时不要使用position 。

1. Flexbox。

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

}

要么

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