css - 为什么图像随浏览器移动但不居中？

Question

#border-search {
    position: relative;
    top: 50% !important;
    left: 25% !important;
    width: 100% !important; 
    margin-left: auto !important;
     margin-right: auto !important;
    display: none;
    }   
    #border-search.center img {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    width: 30%; 
    height: auto;
    }

我如何让它保持居中。我尝试了很多不同的东西，但它们不起作用。显示无需保留，因为我需要它来显示隐藏图像。我还需要添加什么才能使它正常工作？我希望它仅水平居中

这是js fiddle

http://jsfiddle.net/matsuiny2004/zffvcvkk/

Answer 1

您可以尝试将当前的 #border-search 内部 img 元素居中，并在您的 CSS 中进行以下更改，相对定位您的具有自动(且相等)左右边距的图像，并使其居中。

#border-search {
    margin: 0 auto;
    position: relative;
}

#border-search img {
    display: block;
    margin: 0 auto;
    position: relative;
}

display: block; 语句是您的图像被视为 block 元素所必需的，因此它会受到边距属性的影响。

检查 demo JS Fiddle来验证我刚才说的话。 :)