CSS 响应式水平居中答案

【问题标题】：CSS responsive horizontal centeringCSS 响应式水平居中
【发布时间】：2016-05-07 15:08:18
【问题描述】：

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

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

它不工作。我是否可能必须以像素为单位使用容器的宽度？

【问题讨论】：

标签： css centering

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

这是使图像居中的标准方法，它告诉它自动确定固定大小容器左右两侧的空间。

还有一个example。

【讨论】：

【解决方案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%;}

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

【讨论】：