I'm trying to build a page without scrolling (with position: fixed on the body) and by placing an image inside div I can't center it inside the browser screen. Align -... do not work. I've tried padding and margin, but it never gets accurate and responsive

CodePudding user response：

It's not that hard. CSS margin: auto does it for you. Have a look at the code example below.

div {
  margin: 0 auto;
  width: 30%;
  border: 2px solid green;
  padding: 10px;
}

div > img {
  width: 100%;
}

<div>
  <img src="https://via.placeholder.com/150">  
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Give the image a class center. Styling for this class:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

I think this will help you