我无法在没有绝对位置和其他功能的情况下居中图像[重复]

Question

此问题已经在这里有了答案：

How to vertically center a div for all browsers?（45个答案）

How to Vertical align elements in a div?（28个答案）

Flexbox: center horizontally and vertically（12个答案）

已关闭1小时前。

我有两个div，每个都有一个图像和一个标题。

我想使图像垂直居中，或填充div元素而不进行拉伸或任何异常的大小调整。

我搜索并使用了诸如How TO - Center Elements Vertically-CSS Layout - Horizontal & Vertical Align之类的任何建议以及stackoverflow中一些问题的答案，但均无效果。

我想使用并显示此元素具有响应性

我将这些图片用于测试：

.border_slide {
  overflow: hidden;
}
.other_titles
{
  margin-top: 5px;
  height: 120px;
}
.other_titles div
{
  width:49.5%;
  margin-bottom: 5px;

}
.other_titles_cap
{
  position: absolute;
  z-index: 100;
  width:100%;
  background-color: rgba(69,69,69,0.4);
  height: 70px;
  margin-top: 80px;
  transition: all 0.3s ease 0s;
}
/*.other_titles_cap:hover
{
  margin-top: 0;
  height: 150px;
}*/
.title2
{
  height: 150px;
  background-color: #9bfff0;
  /*margin-left: 15px;*/
  float: right;
}
.title2 img
{
  margin-top: 0;
  transition: all 0.4s ease 0s;
}
.title2:hover .other_titles_cap
{
  margin-top: 0;
  height: 150px;
}
.title2:hover img
{
  width: 115% !important;
  opacity: 0.8;
  transform:translate(7%,-10%);
  -ms-transform:translate(7%,-10%);
}

.title3
{
  height: 150px;
  background-color: #ffd5c4;
  float: left;
}
.title3 img
{
  /* transform: translate(7%,-10%); */
  -ms-transform:translate(7%,-10%);
  margin-top: 0;
  transition: all 0.4s ease 0s;
}

.title3:hover .other_titles_cap
{
  margin-top: 0;
  height: 150px;

}
.title3:hover img
{
  width: 115% !important;
  opacity: 0.8;
  transform:translate(7%,-10%);
  -ms-transform:translate(7%,-10%);
}
<div class="other_titles">
  <div class="border_slide title2">
    <div class="other_titles_cap">title of Post2</div>
    <img class="" src="https://i.stack.imgur.com/k6HuQ.jpg" style="width:100%">
  </div>
  <div class="border_slide title3">
    <div class="other_titles_cap">title of Post3</div>
    <img class="" src="https://i.stack.imgur.com/90ten.jpg" style="width:100%">
  </div>
</div>

我通常在宽度小于520像素的响应模式下需要此。

您可以在这里测试：

jsfiddle

我有两个div，每个div都有一个图像和一个标题。我希望图像垂直居中或填充div元素而不会拉伸或任何异常调整大小。我搜索并使用了任何建议，例如How ...

Answer 1

这里有解决方案

Answer 2

类似于下面的代码片段。