CSS 自动页边距不会使页面中的图像居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5734199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto margins don't center image in page
提问by Web_Designer
In this examplethe image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.
在这个例子中，图像没有居中。为什么？我的浏览器是 Windows 7 上的 Google Chrome v10，而不是 IE。
<img src="/img/logo.png" style="margin:0px auto;"/>
回答by Ross
add display:block;and it'll work. Images are inline by default
添加display:block;它会起作用。默认情况下图像是内联的
To clarify, the default width for a blockelement is auto, which of course fills the entire available width of the containing element.
澄清一下，block元素的默认宽度是auto，这当然会填充包含元素的整个可用宽度。
By setting the margin to auto, the browser assigns half the remaining space to margin-leftand the other half to margin-right.
通过将边距设置为auto，浏览器将剩余空间的一半分配给margin-left，另一半分配给margin-right。
回答by sameeuor
You can center auto width div using display:table;
您可以使用居中自动宽度 div display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
回答by Brendan
Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with position:relative;will prevent margin:0 auto;from working, even if top, right, bottom, and leftaren't set.
在某些情况下（如早期版本的IE浏览器，蛤蚧，Webkit的）和继承的元素position:relative;将阻止margin:0 auto;来自工作，即使top，right，bottom，和left未设置。
Setting the element to position:static;(the default) may fix it under these circumstances. Generally, block level elements with a specified width will respect margin:0 auto;using either relativeor staticpositioning.
position:static;在这些情况下，将元素设置为（默认值）可能会修复它。通常，具有指定宽度的块级元素将margin:0 auto;使用relative或static定位。
回答by Daniel Sitarz
In my case the problem was that I had set min and max widthwithout widthitself.
就我而言，问题是我设置了最小和最大宽度而没有宽度本身。
回答by tejaswini pant
Whenever we don't add width and add margin:auto, I guess it will not work. It's from my experience. Width gives the idea where exactly it needs to provide equal margins.
每当我们不添加 width 和 add 时margin:auto，我想它都行不通。这是根据我的经验。宽度给出了提供相等边距的确切位置。
回答by Andrei
there is a alternative to margin-left:auto; margin-right: auto;or margin:0 auto;for the ones that use position:absolute;this is how:
you set the left position of the element to 50% (left:50%;) but that will not center it correctly in order for the element to be centered correctly you need to give it a margin of minus half of it`s width, that will center your element perfectly
有一种替代方法margin-left:auto; margin-right: auto;或margin:0 auto;用于使用position:absolute;此方法的方法：
您将元素的左侧位置设置为 50% ( left:50%;) 但这不会正确居中，以便元素正确居中，您需要给它一个边距减去其宽度的一半，这将使您的元素完美居中
here is an example: http://jsfiddle.net/35ERq/3/
这是一个例子：http: //jsfiddle.net/35ERq/3/
回答by Abram
For a bootstrap button:
对于引导按钮：
display: table;
margin: 0 auto;
回答by Gail
put this in the body's css: background:#3D668F; then add: display: block; margin: auto; to the img's css.
把它放在 body 的 css 中：background:#3D668F; 然后添加：显示：块；保证金：自动；到img的css。
