你如何在一个页面上居中多个堆叠的 DIV？答案

【问题标题】：How do you center multiple stacked DIVs on a page?你如何在一个页面上居中多个堆叠的 DIV？
【发布时间】：2015-02-13 09:31:01
【问题描述】：

我无法弄清楚如何在此页面上排列 div，以便它们居中而不是左对齐。另外，我想在角落覆盖一个锁定图标。我能够把它放在那里，但我希望它不会影响图像的实际大小，而是重叠...这是 CSS 和 HTML 的小提琴：

jsfiddle.net/bpalmer318/tpb2c7un/1/

总结一下：如何使所有页面内容居中，如何在不缩小底部图像的情况下覆盖第二张图像？（注意** 使用的图片只是 NFL 徽标，但这将用于商业目的，稍后会使用公司徽标）

我希望这篇文章能够向其他人展示如何使用叠加图像制作复杂的 div 页面

感谢您的帮助！

【问题讨论】：

【解决方案1】：

您不能将 float 元素居中。

这是一个使用inline-block的demo

【讨论】：

【解决方案2】：

有很多方法可以使页面内容居中。这里只有一个：

在html页面上：

<div id="center">your content here</div>

在css上：

  #center{

width:85%;
margin-left:auto;
margin-right:auto;

}

当然应该根据您的需要调整 porcentage 我已经在您的示例中尝试过这个，它似乎看起来居中。尝试使百分比与内容的百分比完全相同（或者可能更多）。

希望对你有帮助。

你也可以看看这篇文章，它可能会指导你：How to horizontally center a <div> in another <div>?

【讨论】：