CSS 居中自动宽度div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18524722/
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
Center an auto-width div?
提问by Dan K
I'm having trouble because I have a div I want to center and what I have usually been told to do is this:
我遇到了麻烦，因为我有一个想要居中的 div，而我通常被告知要做的是：
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div to adjust its size based on the text in the div, and still be centered. I tried:
问题是，这是为了如果您希望 div 为固定宽度。我希望 div 根据 div 中的文本调整其大小，并且仍然居中。我试过：
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
但这没有用。当我这样做时，它会拉伸 div 以填满屏幕。
Anyone know what to do here?
有人知道在这里做什么吗？
回答by zloctb
for parent block or body - text-align:center;
for centerd block- display:inline-block;
对于父块或主体 - text-align:center; 对于居中块 - display:inline-block;
.center{display:inline-block;background:red}
body{text-align:center}
<div class="center">
<p contenteditable="true">write text</p>
</div>
回答by shinjin
have you tried the approach shown here? http://www.tightcss.com/centering/center_variable_width.htm
您是否尝试过此处显示的方法？ http://www.tightcss.com/centering/center_variable_width.htm
basically. put your content inside a floated div put that floated div within another floated div
基本上。将您的内容放在浮动 div 中 将该浮动 div 放在另一个浮动 div 中
put left: 50%, position relative on outer div put left: -50%, position relative on inner div
向左放置：50%，相对于外部 div 的位置 向左放置：-50%，相对于内部 div 的位置
finally, nest everything in one more div with overflow:hidden
最后，将所有内容嵌套在另一个带有溢出的 div 中：隐藏
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration: http://jsfiddle.net/wbhyX/1/
这是我的 jsfiddle 演示：http: //jsfiddle.net/wbhyX/1/
回答by Kale
Use margin:
0px auto; and display: table;There are example:
https://jsfiddle.net/da8p4zdr/
使用保证金：
0px auto; and display: table;有例子：https:
//jsfiddle.net/da8p4zdr/
回答by Samuel Liew
You might want to try CSS display:table-cellor display:table
您可能想尝试 CSSdisplay:table-cell或display:table
回答by Sharath Daniel
Try this structure.
试试这个结构。
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
回答by Daniel Cheung
EDITED:
编辑：
use table, it could be easier to style. Then add divinto the tr
使用table，它可以更容易地设计。然后加入div到tr
回答by Margaret JB
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
zloctb 于 2013 年 8 月 30 日 4:14 的回答实际上在原则上有效，但不完整。如果您希望元素宽度基于其中的内容为“自动”，并在其父元素内居中但 CHILD 元素内的内容左对齐，请执行以下操作（因为它确实是最简单的方法）：
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
（显然，如果您只想让所有内容严格居中，则不需要子元素的代码。）
回答by Kursat Turkay
.outer-container { position: relative; left: 50%; float: left; clear: both; margin: 10px 0; text-align: left; }
.外容器{位置：相对；左：50%；向左飘浮; 清楚：两者；边距：10px 0；文本对齐：左；}
.inner-container { background: red; position: relative; left: -50%; text-align: left; }
.inner-container { 背景：红色；位置：相对；左：-50%；文本对齐：左；}
回答by WebWanderer
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center;and margin:auto,and you'll need to know when to use which.
将元素水平居中可能会有点奇怪，因为该功能不是很直观。真的，您需要使用text-align:center;和来玩游戏，并且margin:auto,您需要知道何时使用哪个。
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
例如，如果我想居中一个元素（原始文本）的内容，包括按钮和输入，我可以使用text-align:center.
.text-center {
text-align:center;
}<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
如果我们向容器中添加其他元素，这些元素的宽度将强制为 100%。这有助于我们模拟它是居中的，因为从技术上讲，100% 是居中的！傻，不是吗？
.text-center {
text-align:center;
}<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>If your width property IS defined though, then you can use the margin: autostyle to center it within the parent.
如果您定义了宽度属性，那么您可以使用该margin: auto样式将其在父项中居中。
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
您需要确定哪种解决方案最适合您。我希望我能提供更多帮助，但是当您没有为您的问题提供 HTML 时，很难知道哪种解决方案最适合您的需求！
Either way, I hope this JSFiddlehelps clear things up!
无论哪种方式，我希望这个 JSFiddle有助于解决问题！
