将 div 对齐到中心答案

【问题标题】：Align a div to center将 div 对齐到中心
【发布时间】：2010-12-16 23:16:42
【问题描述】：

我想将div 浮动到中心。可能吗？ text-align: center 在 IE 中不工作。

【问题讨论】：

【解决方案1】：

本身没有浮动到中心。如果你想在另一个块元素中居中，请执行以下操作：

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

与：

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

现在这不会使文本环绕它（就像它会向左或向右浮动一样）但就像我说的：没有浮动中心。

【讨论】：

对于那些在这样做后感到沮丧但仍然无法正常工作的人，请输入 'display:inline-block;'在你的“#outer”参数中
我知道这是一个老问题。现在我们可以简单地使用
另外，要覆盖浮动，请将其设置为无

【解决方案2】：

这一直对我有用。

如果你为你的 DIV 设置了一个固定的宽度和正确的 DOCTYPE，试试这个

div {        
  margin-left:auto;
  margin-right:auto;
}

希望这会有所帮助。

【讨论】：

这也适用于非固定宽度的 DIV，只需添加 display: table;
@alanaktion 绝妙的提示！

【解决方案3】：

通常的技术是`margin:auto`

但是，旧的 IE 不理解这一点，因此通常将text-align: center 添加到外部包含元素。您不会认为这会起作用，但忽略 auto 的相同 IE 也会错误地将文本对齐中心应用于块级内部元素，因此事情会解决。

这实际上并没有真正的浮动。

【讨论】：

文本对齐中心在 IE 中不起作用...罗斯出租车给我任何其他答案
请注意，“旧 IE”是指 IE 5.x 及更早版本，现在大多数人并不关心。
你甚至不需要在 IE6 上做text-align: center 吗？
仅在 Quirks 模式下（并且您不应该使用 Quirks 模式，除非在真正特殊的情况下）

【解决方案4】：

以下解决方案对我有用。

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

【讨论】：

【解决方案5】：

结合 display:inline-block 和 text-align:center 将浮动 div 居中“工作”。

尝试通过调整 jsfiddle 的窗口大小来改变外部 div 的宽度

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

和css：

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}

【讨论】：

【解决方案6】：

我的一个网站涉及一个大小可变的 div，您不会提前知道它。它是一个带有2个嵌套div的外部div，外部div与第一个嵌套div的宽度相同，也就是内容，第二个嵌套在内容下方的div是标题，必须居中。因为不知道宽度，所以我使用jQuery进行相应的调整。

所以我的html是这样的

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

然后我像这样在 jQuery 中将标题居中

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

【讨论】：

【解决方案7】：

使用“spacer” div 将要居中的 div 包围起来。最适合流体设计。一定要给垫片高度，否则它们将不起作用。

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

【讨论】：

【解决方案8】：

这对我有用..

div.className {
display: inline-block;
margin: auto;
}

【讨论】：

我试图在外部 div 中浮动动态创建的 div.. 我可以有 1 或 2 个 div.. 如果有 1 个 div 那么它应该浮动在中心，如果有 2 个 div 然后浮动并排..我希望它清楚:)

【解决方案9】：

这可以帮助你..:D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

【讨论】：

【解决方案10】：

不，不是。

您可以将内容气泡置于元素右侧 (float: left) 或元素左侧 (float: right)，但没有规定两边都出现内容气泡。

【讨论】：

【解决方案11】：

<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

将背景中的 div 浮动到最大宽度，在其中设置一个不透明的 div 并使用自动边距将其居中。

【讨论】：

【解决方案12】：

这很好用

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

这也可以通过自适应布局很好地调整大小..

CSS 示例是：

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}

【讨论】：

【解决方案13】：

这对我有用。

我在我的页面上包含了两次无序列表。一个 div class="menu" id="vertical" 另一个居中的是 div class="menu" id="horizontal"。由于列表向左浮动，因此我需要一个内部 div 将其居中。见下文。

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }

【讨论】：

【解决方案14】：

试试这个，它对我有帮助：将 div 包装在标签中，问题是它也会使 div 的内容居中（如果没有另外编码）。希望对您有所帮助:)

【讨论】：

通常的技术是margin:auto

通常的技术是`margin:auto`