0

How to center Image both horizontally and vertically inside a div

HTML : 


    <div class="main-item">
      <div class="main-item--content">
        <img src="imgs/item-1.png" alt="item-1" class="main-item--img" />
      </div>
    </div>

CSS :

.main-item {
  height: 95vh;
  margin-top: 6rem;
  background-color: $color-grey-light;
}

What I have now : now

The result I want : result

I want the result to be responsive , so that the image stay in the center no matter what is the width of the device screen. The most important thing I want the image to be responsive.

Ayman Tarig
  • 181
  • 1
  • 4
  • 11
  • Please make a proper research before posting. A simple net search using your title would have given you all the results you need. – Asons May 05 '19 at 10:27
  • That doesn't answer the part of making the image responsive – Ayman Tarig May 05 '19 at 10:28
  • As he said: Just do simple research. There are tons(!) of answers on how to make images responsive. – Christopher Dosin May 05 '19 at 10:29
  • If you don't want to help , there is someone who will answer me . – Ayman Tarig May 05 '19 at 10:30
  • I checked a couple of your questions, and you repeatedly fail to provide a verifiable sample, or a clear description, and w/o, users won't be able to provide proper answers, and the question will be useless for future users, which it is not what it is supposed to be, it should be useful. That, together with a proper research is expected when posting a question at SO, and if anything is unclear, please reread [ask]. – Asons May 05 '19 at 10:44

0 Answers0