CSS响应水平居中

Question

我试图为每个屏幕尺寸水平居中一个图像（徽标）做这样的事情

#container {position:relative width:100%; height:100%;}    
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}

它不起作用。我可能必须使用像素宽度的容器吗？

Answer 1

 #logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}

Answer 2

#logo { height:100px; margin:0 auto; width:500px; }

这是通过告诉图像自动确定固定尺寸容器左右两侧空间来对图像进行居中的标准方法。

和example。

Answer 3

我想这取决于你如何定义“响应”，但如果你的意思是响应内容调整大小来容纳视口的宽度，那么所有其他答案都不符合这个标准，因为它们依赖于固定像素宽度。例如，如果视口小于500px会发生什么？

类似的概念将适用于百分比宽度，并且实际上是响应性的，因为您居中的东西也将是灵活的：

#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}

如果您不希望“logo”元素变大（在大屏幕上），您可以添加max-width:600px;来限制它，但是您需要添加一些媒体查询来保留它适当地集中在大屏幕上。