How can I put a picture in the middle of a page?

Question

<img id="lighthouse_Logo" src="{{ STATIC_URL }}img/icons/lighthouse_Logo.png" />

Css

img#lighthouse_Logo{
height: auto; 
width: auto;
max-width:500px;}

how can I achieve this?

Answer 1

As you said middle of page and not center, I presume you mean horizontally:

Add margin: 0 auto; to your css.

If you mean vertically, this should work:

  position: relative;
  top: 50%;
  transform: translateY(-50%);

Answer 2

#Lighthouse_Logo {
    width: auto;
    height: auto:
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 3

This code places the logo in the center of the screen(horizontally and vertically):

#Lighthouse_Logo {
    width: 600px;
    height: 400px:
    position: absolute;
    top:50%;
    left:50%;
    margin: -200px 0 0 -300px;
}