Html 如何在容器中居中浮动 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3317783/
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 Floated Divs in a Container
提问by DLiKS
Is it possible to center floated divs in a container and if so how?
是否可以将浮动的 div 居中放置在容器中，如果可以，如何放置？
For example I have a page with a container div containing lots of variable sized (dynamically generated) floated (left) divs. The divs overflow onto the next line reguarly but they are never centered in the container div, instead alined with the left. It looks like this:
例如，我有一个带有容器 div 的页面，其中包含许多可变大小（动态生成）浮动（左）div。div 定期溢出到下一行，但它们永远不会在容器 div 中居中，而是与左侧对齐。它看起来像这样：
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ ++++++ +++ + -
- -
----------------------------
Whereas I would like the floated divs centered in the container like this:
而我希望浮动的 div 像这样在容器中居中：
----------------------------
- -
- +++ +++++ ++++ ++ -
- +++ +++++ ++++ ++ -
- -
- ++ ++++++ +++ + -
- ++ ++++++ +++ + -
- -
----------------------------
Thanks,
谢谢，
DLiKS
德利克斯
采纳答案by Sarfraz
It is possible. Using http://www.pmob.co.uk/pob/centred-float.htmand http://css-discuss.incutio.com/wiki/Centering_Block_Elementas a source.
有可能的。使用http://www.pmob.co.uk/pob/centred-float.htm和http://css-discuss.incutio.com/wiki/Centering_Block_Element作为来源。
Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/
这是一个演示这个概念的小提琴，使用下面的 HTML 和 CSS：https: //jsfiddle.net/t9qw8m5x/
<div id="outer">
<ul id="inner">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2 with long text</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div>
This is the minimum CSS needed for the effect:
这是效果所需的最低 CSS：
#outer {
float: right;
position: relative;
left: -50%;
}
#inner {
position: relative;
left: 50%;
}
#inner > li {
float: left;
}
Explanation:
解释：
Start off with just the li { float: left; }rule. Then wrap those floats in the left: 50%; relative position, so the left edge of the <ul>'s box is in the horizontal centre of the page, then use the rules in #outerto correctly adjust it so the centre of #inneris aligned with the page.
从li { float: left; }规则开始。然后将那些浮动包裹在 中left: 50%; relative position，使<ul>的框的左边缘位于页面的水平中心，然后使用中的规则#outer正确调整它，使 的中心#inner与页面对齐。
回答by dimmech
Calculate the total amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin:auto.
计算所需布局将占用的屏幕空间宽度总量，然后使父级具有相同的宽度并应用 margin:auto。
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60px */
margin: 10px;
/* 6 borders x 10px = 60px */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>回答by Carl Papworth
With CSS3 you can also achieve this with flexbox:
使用 CSS3，您还可以使用 flexbox 实现这一点：
HTML:
HTML：
<ul id="flexcontainer">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2 with long text</a></li>
<li><a href="#">Item 3</a></li>
</ul>
Min CSS:
最小 CSS：
#flex-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#flex-container > li {
float: left;
}
Fiddle (with some styling for visualisation): https://jsfiddle.net/k5o37dff/4/
小提琴（带有一些可视化样式）：https: //jsfiddle.net/k5o37dff/4/
More about flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
更多关于 flexbox：https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
Browser support: https://www.w3schools.com/cssref/css3_pr_flex.asp
回答by Ted Gueniche
A nice trick to center "div" element is to set "margin: auto", it will center them.
将“div”元素居中的一个不错的技巧是设置“margin: auto”，它将使它们居中。
回答by isildur4
<div id='contain'><center><div id='content'>qwerty</div></center></div>
OR
或者
<div id='contain'><div id='content'>qwerty</div></div>
<style type='text/css'>
#content {
width:200px;
height:200px;
margin:auto;
/* margin:auto; requires width and i think height to be defined in nearly all browsers */
}</style>
