Html 如何在 CSS 中的容器内居中多个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17188455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center multiple divs inside a container in CSS
提问by Jan Van Looveren
I am testing to center divider like the style of windows metro. if you check following code:
我正在测试像 windows 地铁一样的中心分隔线。如果您检查以下代码：
.container {
height: 300px;
width: 70%;
background: #EEE;
margin: 10px auto;
position: relative;
}
.block {
background: green;
height: 100px;
width: 100px;
float: left;
margin: 10px;
}<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>The grey box is 70% and centering on the screen that is correct, but when I make the window wider and the green dividers are moving, you can see that the green boxes at some point are not centered.
灰色框是 70% 并在屏幕上居中是正确的，但是当我使窗口变宽并且绿色分隔线移动时，您可以看到某些点的绿色框未居中。
I am searching for this already the whole day :s
我已经一整天都在寻找这个：s
How can help me on this one?
如何帮助我解决这个问题？
回答by George
My previous answer showed a frankly outdated method (it still works, there are just better ways to achieve this). For that reason, I'm updating it to include a more modern, flexboxsolution.
我之前的回答显示了一种坦率地过时的方法（它仍然有效，只是有更好的方法来实现这一点）。出于这个原因，我正在更新它以包含更现代的flexbox解决方案。
See support for it here; in most environments, it's safe to use.
在此处查看对它的支持；在大多数环境中，使用它是安全的。
This takes advantage of:
这利用了：
display: flex: Display this element with flexbox behaviourjustify-content: centerAlign the inner elements centrally along the main axis of the containerflex-wrap: wrapEnsure the inner elements automatically wrap within the container (don't break out of it)
display: flex: 使用 flexbox 行为显示此元素justify-content: center沿容器的主轴居中对齐内部元素flex-wrap: wrap确保内部元素自动包裹在容器内（不要打破它）
Note: As is usual with HTML & CSS, this is just one of manyways to get the desired result. Research thoroughly before you choose the way that's right for yourspecifications.
注意：与 HTML 和 CSS 一样，这只是获得所需结果的众多方法之一。在选择适合您的规格的方式之前，请彻底研究。
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>Original Answer
原答案
You could apply the style text-align:center;to your container and display your .blocks as inline-block elements:
您可以将样式text-align:center;应用于您的容器并将您的.blocks显示为内联块元素：
.container {
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
display:inline-block;
margin: 10px;
}<div class="container">
<div class="block">1. name of the company</div><!--
--><div class="block">2. name of the company</div><!--
--><div class="block">3. name of the company</div><!--
--><div class="block">4. name of the company</div><!--
--><div class="block">5. name of the company</div><!--
--><div class="block">6. name of the company</div><!--
--><div class="block">7. name of the company</div><!--
--><div class="block">8. name of the company</div>
</div>Here's an updated Fiddle
这是更新的小提琴
Notice I've commented out the white-space between your <div>s. Because the elements are now displayed inline, your spaces will be acknowledged. This is one of many waysto 'fight the space'.
请注意，我已经注释掉了<div>s之间的空格。由于元素现在内联显示，您的空间将被确认。这是“对抗空间”的众多方法之一。
回答by Pete
回答by Stano
So basically your CSS needs these changes
所以基本上你的 CSS 需要这些改变
.container { text-align:center; }
.block { display:inline-block; *display:inline; zoom:1; vertical-align:top; }
to make the CSS compatible with IE7.
使 CSS与 IE7 兼容。
To align the bottom tiles to the left side, some javascript is needed. Due to .querySelector()backward compatibility the following works everywhere including IE8+; for simplification and IE7 compatibility jQuery is highly recommended:
要将底部瓷砖与左侧对齐，需要一些 javascript。由于.querySelector()向后兼容性，以下适用于包括 IE8+ 在内的任何地方；为了简化和 IE7 兼容性，强烈推荐使用 jQuery：
if (!window.addEventListener) {
window.addEventListener = function (type, listener, useCapture) {
attachEvent('on' + type, function () {
listener(event);
});
};
}
window.addEventListener('load', makePaddings, false);
window.addEventListener('resize', makePaddings, false);
function makePaddings() {
var container = document.querySelector('.container');
var blocks = document.querySelectorAll('.block');
var br = [],
max = 0,
i = 0;
var top = blocks[0].getBoundingClientRect().top;
while (blocks[i] && blocks[i].getBoundingClientRect().top == top) {
i++;
}
var show = blocks.length % i ? i - blocks.length % i : 0; /* how many paddings are needed */
var paddings = document.querySelectorAll('.padding');
if (paddings.length < show) { // add missing paddings
i = show - paddings.length;
while (i--) {
var elem = document.createElement('div');
elem.className = 'padding';
elem.style.visibility = 'hidden';
container.appendChild(elem);
}
paddings = document.querySelectorAll('.padding');
}
for (i = 0; i < paddings.length; i++) {
paddings[i].style.display = (i < show) ? 'inline-block' : 'none';
}
}
回答by DaniP
Now you can use Flexboxproperty as base for your layouts. This will allow you more control over the child elements.
现在您可以使用Flexbox属性作为布局的基础。这将允许您更好地控制子元素。
.container {
width: 70%;
background: #EEE;
margin: 10px auto;
position: relative;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>Note:You must need to validate the supportand maybe need some vendor prefixes. But as April of 2017 most browsers allow the use.
注意：您必须需要验证支持，并且可能需要一些供应商前缀。但截至 2017 年 4 月，大多数浏览器都允许使用。
回答by antelove
.container {
background: lightgrey;
height: auto;
width: 70%;
margin: 10px auto;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>回答by sarfaraj
<body>
<div class="container">
<div style="width:78%; margin:0 auto;">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>
</div>
</body>
Try this div "<div style="width:78%; margin:0 auto;">"
试试这个 div " <div style="width:78%; margin:0 auto;">"
