这是我想要在 CSS 中执行的操作的图片： image.
有什么想法吗？
【问题讨论】：
margin:0 auto; 的常用解决方案成为一种选择。
标签： css html resize wrapper center
初始问题
居中没有明确宽度的元素
这阻止了margin: 0 auto; 的常用解决方案成为一个选项。
更大的问题
没有未使用的空间用于将包装器置于其容器中
如果元素的宽度由其内容的宽度决定，则称该元素为收缩包装。如果内容的大小发生变化，则元素的宽度也会发生变化。这是内联、内联块或浮动元素的默认行为。
当收缩包装的父级中的内容环绕到下一行时，父级停止收缩包装；它现在占据了它自己的容器的整个宽度。从技术上讲，父对象是居中的，因为它完全填满了容器，但它的内容不是居中的。除非父级具有明显的背景颜色或壁纸图像，否则父级似乎也不居中。
这也适用于一些更高级的功能，比如 CSS3 flexbox，显然也阻止了它成为一种选择。
解决方案
媒体查询
原来有一个简单的 CSS 解决方案。基本问题是这种单一的布局网格不能支持广泛的屏幕尺寸并且仍然将内容居中。但是在CSS3 media queries的帮助下，可以创建各种布局网格，根据屏幕大小选择合适的。
例如，创建一个包含 1 列的布局网格，以及一个包含 2 列的布局网格，以及一个包含 3 列的布局网格，依此类推，根据需要创建尽可能多的列。无论哪个网格适合当前的屏幕尺寸，那就是使用的那个。布局网格可能是相同的，除了给定每个网格的固定宽度，宽度刚好足以容纳列数。由于每个网格都有固定的宽度，因此使用margin: 0 auto; 将它们水平居中变得微不足道。
换句话说，与其试图强制一个布局来处理所有浏览器尺寸，不如创建许多布局，然后选择一个可以轻松处理当前浏览器尺寸的布局。
【讨论】：
将所有 div 放在另一个 div 中，并使两边的边距自动。 查看这个综合示例：Problem centering div with css
【讨论】：
只需将 CSS 属性赋予包装器
#wrapper{
margin: 0px auto;
}
当您调整浏览器窗口大小时，上述代码将自动居中对齐。这是为您的页面添加响应能力的过程。
【讨论】：
您想要居中的 div 必须有一个宽度，并且您必须将边距设置为自动。 这是一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#wrapper{
width: 800px;
min-height: 200px;
margin: auto;
}
.block{
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
【讨论】：
margin:auto 需要明确的宽度。在上面的问题中，宽度是动态的。
由于懒得实现媒体查询（以及要考虑的多种场景），我实现了一个简单的解决方案。将图像放入一个无序列表（其中 li {display: inline-block}），然后是 (text-align: center) 包装器。稍后调整您的边距等以使其漂亮。
<style>
#wrapper {
text-align: center;
}
#wrapper li {
display: inline-block;
}
</style>
<div id="wrapper">
<ul>
<li><img src=""></img></li>
<li><img src=""></img></li>
<li><img src=""></img></li>
<li><img src=""></img></li>
<li><img src=""></img></li>
</ul>
</div>
【讨论】：