I cant center image without absolute position and other esle [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have two div that each of them has an image and a caption.
I want image center vertically or fill div element without stretching or Any unusual resizing.
I searched and use any suggestion Like How TO - Center Elements Vertically- CSS Layout - Horizontal & Vertical Align and answers of some questions in stackoverflow, but none worked.
I want use and display this elements responsive
I use this pictures for test:
.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>
I Mostly need this for responsive mode in width size below 520px.
You can test this here:
jsfiddle

Answer 1

Something like below snippet.
*, *:before, *:after{box-sizing: border-box;}
.other_titles{
display: flex;
justify-content: space-between;
flex-flow: wrap;
}
.border_slide {
width: calc(50% - 10px);
margin-bottom: 5px;
overflow: hidden;
position: relative;
height: 150px;
}
.border_slide img{
transition: all 0.4s ease 0s;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
}
.other_titles_cap{
position: absolute;
z-index: 100;
width: 100%;
background-color: rgba(69,69,69,0.5);
height: 70px;
bottom: 0;
left: 0;
transition: all 0.3s ease 0s;
padding: 10px;
font-size: 16px;
color: #fff;
}
.border_slide:hover .other_titles_cap{
margin-top: 0;
height: 150px;
background-color: rgba(0,0,0,0.75);
}
.border_slide:hover img{
width: 115% !important;
opacity: 0.8;
transform: scale(1.2);
}
<div class="other_titles">
<div class="border_slide">
<img src="https://i.stack.imgur.com/k6HuQ.jpg">
<div class="other_titles_cap">Title of Post2</div>
</div>
<div class="border_slide">
<img src="https://i.stack.imgur.com/90ten.jpg">
<div class="other_titles_cap">Title of Post3</div>
</div>
</div>

Answer 2

Here you go with a solution
.border_slide {
overflow: hidden;
}
.other_titles
{
display: flex;
flex-direction: row;
align-items: center;
height: 100vh;
justify-content: space-around;
}
.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>
jsfiddle
Solution is using flex css.
Check the class other_titles
.other_titles {
display: flex;
flex-direction: row;
align-items: center;
height: 100vh;
justify-content: space-around;
}