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

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

类似的概念也将与宽度百分比的工作，实际上是反应迅速，在你为中心的东西将是灵活的：

#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%;} 

如果您不希望“标识”元素（大屏幕），你可以添加max-width:600px;来限制它，但你需要添加一些媒体查询，以保持它在大屏幕上的正确居中。