居中一个自适应宽度的div？

Question

我遇到了困难，因为我想居中一个 div，而通常我被告知这样做：

width: 700px;
margin-left: auto;
margin-right: auto;

问题是，这只适用于希望div具有固定宽度的情况。我希望div根据其文本调整大小，并仍然居中。我尝试过：

width: auto;
margin-left: auto;
margin-right: auto;

但是这样做没有效果。当我这样做时，它会拉伸div以填满屏幕。

有人知道在这里该怎么做吗？

- Dan K

---

给你的 div 设定一个特定的宽度，并根据你的需求更好地对齐文本！！如果你使用 text-align:center;，div 将保持原有位置，文本将居中显示。 - Deepanshu Goyal

这就是我试图避免的 - 给我的 div 设置固定宽度。 - Dan K

@DanK，你能否粘贴你的HTML代码或创建一个fiddle呢？这将有助于更容易地理解。 - Leo T Abraham

你应该提供 div 和其容器的 HTML，以及其 CSS。 - Deepanshu Goyal

Answer 1

对于父级块或整个页面 - 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>

示例 http://jsfiddle.net/RXP4F/

可编辑内容 MDN

- zloctb

---

工作得很好！谢谢！ - tibelchior

无法工作。什么是contenteditable？ 而body标签与问题无关。 - Zen Of Kursat

当你去演示时，它能够正常运行，怎么可能会出现问题呢 :D - pangular

可行的答案。我不喜欢将文本对齐设置为body，而是更喜欢使用父div并设置其文本对齐方式。 - Tejasvi Hegde

Answer 2

你尝试过这里展示的方法吗？http://www.tightcss.com/centering/center_variable_width.htm

基本上，将您的内容放在一个浮动的div中，再将该浮动的div放在另一个浮动的div中。

在外部div上设置left: 50％，position:relative， 在内部div上设置left:-50％，position:relative。

最后，在一个带有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;
}

这是我的jsfiddle演示： http://jsfiddle.net/wbhyX/1/

- shinjin

---

这对我来说应该是被接受的答案 ^^ 谢谢 @shinjin - Nam G VU

绝对是最好的答案，因为当您堆叠块时，它们不会居中。只有 div 居中。 - Lennart Hammarström

Answer 3

使用 margin: 0px auto; 和 display: table;，以下是示例：https://jsfiddle.net/da8p4zdr/

- Kale

Answer 4

您可能想尝试使用CSS display:table-cell或display:table

- Samuel Liew

---

没错 - 我尝试了display:table属性，但它会移除我在div中的列... - Dan K

Answer 5

尝试使用这个结构。

<div class="container">
    <div class="center_div">

    </div>
</div>



.container{
    float: left;
    left: 50%;
    position: relative;
}
.center_div{
   position: relative;
   left: -50%;
   float: left;
}

- majorhavoc

---

谢谢 - 但我认为因为我在“center_div”中有列，这与CSS不兼容。我的容器div是#Body，我想要居中的div是宽度为auto的#Content。 - Dan K

Answer 6

zloctb在2013年8月30日4:14的回答原则上是有效的，但不完整。如果您希望元素的宽度基于其中的内容，并且在其父元素中居中，但其子元素内部的内容左对齐，则执行以下操作（因为这确实是最简单的方法）：

.parent {
  width: 100%;
  text-align: center;
}

.parent div.child {
  display: inline-block;
  text-align: left;
  width: auto;
}

显然，如果您只想让所有内容严格居中，就不需要子元素的代码。

- Margaret JB

Answer 7

水平居中一个元素可能会有点奇怪，因为这个功能并不是很直观。实际上，你需要使用 text-align:center; 和 margin:auto; 进行一些调整，并且需要知道何时使用哪个。

例如，如果我想要将一个元素（包括按钮和输入框）的内容居中显示，我可以使用 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>

如果我们向容器添加其他元素，这些元素的宽度将被强制设置为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>

如果您的宽度属性已经定义，那么您可以使用 margin: auto 样式将其居中于父元素中。

<div style="margin:auto;border:1px solid black;width:300px;" >
  I am centered!
</div>

你需要确定哪种解决方案最适合你。我希望我能提供更多帮助，但是当你没有为问题提供HTML时，很难知道哪个解决方案最适合你的需求！

无论如何，我希望这个JSFiddle可以帮助你搞清楚情况！

- WebWanderer

Answer 8

.outer-container { position: relative; left: 50%; float: left; clear: both; margin: 10px 0; text-align: left; }

.inner-container { background: red; position: relative; left: -50%; text-align: left; }

- Zen Of Kursat

Answer 9

编辑：

使用 table，样式会更容易处理。然后在 tr 中添加 div。

- Daniel Cheung

---

我实际上有一些列在我的div中，由于宽度为auto，这些列会拉伸以填满屏幕。这些列具有固定的宽度 - 但父div的宽度是自适应的。 - Dan K

我尝试过使用display: table，但由于我的div中有列，所以它不起作用。列被消除，只有一个出现在页面的中心位置。 - Dan K