如何在页面中间放置图片？

Question

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

的CSS

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

我怎样才能做到这一点？

Answer 1

正如你所说的页面中间而不是中心，我认为你的意思是横向：

将margin: 0 auto;添加到您的CSS中。

如果你的意思是垂直，这应该有效：

  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

此代码将徽标放置在屏幕中央（水平和垂直）：

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