图像似乎不是以移动设备为中心

Question

我正在尝试将图像集中在我的网站上 - 当在台式计算机上加载页面时看起来很棒，但是在手机浏览器上它看起来像这样

我用来居中图像的CSS如下;

#logo
{
    max-width: 60%;
    min-width: 300px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto 
}


        <header>
            <img src="images/500x245.png" id="logo"</img>
            <h1>Welcome to AppCloud</h1>
        </header>

任何人都可以建议一些替代方法，因为我的方式似乎失败了。感谢

Answer 1

减少它将完美运作的min-width

#logo{
    max-width: 60%;
    min-width: 300px; /** <<--- changes to be done here **/
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto 
}