Html 图像似乎没有集中在移动设备上

我正在尝试在我的网站上集中一个图像，当在桌面电脑上加载页面时，它看起来很棒，但是在手机浏览器上它看起来是这样的

我用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>

#徽标
{
最大宽度：60%；
最小宽度：300px；
高度：自动；
显示：块；
左边距：自动；
右边距：自动
}
欢迎来到AppCloud

---

谁能建议一些替代方法，因为我的方法似乎失败了。谢谢

减小

最小宽度

它会工作得很好

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

#徽标{
最大宽度：60%；
最小宽度：300px；/**将
文本对齐：居中；
添加到图像父元素，并移除显示块和边框减小最小宽度它将完美工作确实如此，太尴尬了！非常感谢您的帮助，如果您想提供答案，我可以接受