在 CSS 中居中可变宽度 div 的简单方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7266755/
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
Easy way to center variable width divs in CSS
提问by Talon
I'm trying to center a Div that will have varying width's (based on content of a website).
我正在尝试将具有不同宽度的 Div 居中（基于网站的内容）。
I read about a relative positioning technique here:
我在这里阅读了一种相对定位技术：
http://www.tightcss.com/centering/center_variable_width.htm
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
但我认为必须有一种更简单的方法来做到这一点？
回答by Joe Landsman
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
这是一个非常可靠的方法，应该在大多数浏览器中都能很好地工作。当你分解它时，它并不是那么复杂。这是一个基本示例：
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
回答by sandeep
@Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/
@爪; 你可以这样做http://jsfiddle.net/sandeep/7PXQF/
CSS:
CSS：
.container{
background-color:red;
text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}
HTML:
HTML：
<div class="container">
<div class="center">
<p>This is a div with an much wider width, to make the yellow div go off the page to the right. We'll type a bit more to be sure.</p>
<p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
</div>
</div>
回答by scooterlord
Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:
嗯，没有比这更简单的了，并且完全支持所有浏览器；甚至不需要容器：
.centered {
display:table;
margin:0 auto;
}
<div class="centered">
content
</div>
Here is a working fiddle: https://jsfiddle.net/1tnprnoz/
这是一个工作小提琴：https: //jsfiddle.net/1tnprnoz/
回答by Munim Munna
Now with flex-box you can easily achieve this with justify-content: center;.
现在使用 flex-box，您可以轻松地使用justify-content: center;.
#container{
background: gray;
display: flex;
justify-content: center;
}<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>This can also be achieved by applying margin: autoto the containers child selector #container>*.
这也可以通过应用margin: auto到容器子选择器来实现#container>*。
#container{
background: #c7c7c7;
}
#container>*{
margin: auto;
}<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>Note:content div is styled inline as these styles are generated styles and are out of the scope of this question.
注意：内容 div 被设置为内联样式，因为这些样式是生成的样式并且超出了这个问题的范围。
