I cant center image without absolute position and other esle

Question

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

@RaeeshAlam for other_titles,title2 and title3 yes, height is fixed 120px and 150px — sidoco, Mar 24 '20 at 08:07

score 1 · Accepted Answer · answered Mar 24 '20 at 10:26

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>

score 0 · Answer 2 · answered Mar 24 '20 at 07:28

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

Thanks for your answer.but I want centering images vertically in their box ,not all of them — sidoco, Mar 24 '20 at 09:28

I cant center image without absolute position and other esle

2 Answers2