如何使元素水平居中？

Question

如何水平居中<div>在另一个<div>使用CSS？

<div id=“outer”>Foo-Foo</div>

Answer 1

使用柔性接线盒很容易将div设置为水平居中和垂直居中。

#内部｛边框：0.05em纯黑色；}#外部{边框：0.05em实心红色；宽度：100%；显示：flex；justify-content：中心；}

<div id=“outer”>Foo-Foo</div>

要将div垂直居中对齐，请使用属性对齐项目：居中.

---

其他解决方案

您可以将此CSS应用于内部<div>:

#内部{宽度：50%；边距：0自动；}

当然，您不必设置宽度到50%任何宽度小于<div>将起作用边距：0自动实际的定心是什么。

如果你的目标是Internet Explorer 8（以及以后），最好是这样：

#内部{显示：表格；边距：0自动；}

它将使内部元素水平居中，并且无需设置特定的宽度.

此处的工作示例：

#内部{显示：表格；边距：0自动；边框：1px纯黑色；}#外部{边框：1px纯红色；宽度：100%}

<div id=“outer”>Foo-Foo</div>

Answer 2

如果您不想在内部设置固定宽度div公司你可以这样做：

#外部{宽度：100%；文本对齐：居中；}#内部{显示：嵌入式块；}

<div id=“outer”>Foo-Foo</div>

这就形成了内在分区到可以居中的内联元素中水平对齐.

Answer 3

最好的方法是使用CSS3。

旧的盒子模型（已弃用）

显示：框及其属性盒装,盒对齐,箱形的,盒方向等已被flexbox所取代。虽然它们可能仍然有效，但不建议在生产中使用。

#外部{宽度：100%；/*Firefox浏览器*/显示：-moz-box；-moz-box-pack：中心；-moz-box-align：中心；/*Safari和Chrome浏览器*/显示：-webkit-box；-webkit-box-pack：中心；-webkit-box-align：居中；/*W3C公司*/显示：框；盒子包装：中心；盒对齐：居中；}#内部{宽度：50%；}

<div id=“outer”>Foo-Foo</div>

根据您的可用性，您还可以使用盒向、盒-弯、盒-方向属性。

带有Flexbox的现代盒子模型

#外部{显示：flex；柔性方向：行；柔性缠绕：缠绕；justify-content：中心；对齐项目：居中；}

阅读有关居中子元素的更多信息

• CSS框模型模块级别3

• 箱式模型（CSS2）

• MDN上的框对齐

而且这解释了为什么盒子模型是最好的方法:

• 为什么W3C盒子模型被认为更好？

Answer 4

#居中{位置：绝对；左：50%；左边边距：-100px；}

<div id=“outer”style=“width:200px”>Foo-Foo</div>

确保父元素为定位即相对、固定、绝对或粘性。

如果您不知道div的宽度，可以使用转换：translateX（-50%）；而不是负边距。

使用CSS计算（），代码可以变得更简单：

.居中{宽度：200px；位置：绝对；左：calc（50%-100px）；}

原理仍然相同；将物品放在中间并补偿宽度。

Answer 5

我创造了这个例子演示如何垂直地和水平 排列.

代码基本上是这样的：

#外部{位置：相对；}/*和*/#内部{边距：自动；位置：绝对；左：0；右：0；顶部：0；底部：0；}

<div id=“outer”>Foo-Foo</div>

它将留在中心即使你调整大小你的屏幕。

Answer 6

一些海报提到了CSS 3的中心使用方式显示：框.

此语法已过时，不应再使用。[另请参见这篇文章].

为了完整起见，下面是使用灵活的盒子布局模块.

因此，如果您有简单的标记，如：

<div class=“box”><div class=“item1”>AB类<div class=“item3”>C</div>

…如果要将项目集中在框中，则需要在父元素（.box）上执行以下操作：

.box文件{显示：flex；柔性包裹：包裹；/*可选。只有当你想要包裹物品时*/justify-content:中心；/*用于水平对齐*/align-items：居中；/*用于垂直对齐*/}

.box文件{显示器：柔性；柔性缠绕：缠绕；/*可选。只有当你想要包裹物品时*/justify-content：中心；/*用于水平对齐*/对齐项目：居中；/*用于垂直对齐*/}* {边距：0；填充：0；}html，车身{高度：100%；}.box文件{高度：200px；显示：flex；柔性缠绕：缠绕；justify-content：中心；对齐项目：居中；边框：2px实心番茄；}.box目录{边距：0 10px；宽度：100px；}.项目1{高度：50px；背景：粉红色；}.项目2{背景：棕色；高度：100px；}.项目3{高度：150px；背景：橙色；}

<div class=“box”><div class=“item1”>AB类<div class=“item3”>C</div>

如果您需要支持对flexbox使用旧语法的旧浏览器这里是一个好看的地方。

Answer 7

如果你不想设置一个固定的宽度，也不想要额外的边距，请添加显示：内联块到你的元素。

您可以使用：

#内部{显示：表格；边距：0自动；}

<div id=“outer”>＜div id=“inner”＞Foo Foo＜/div＞</div>

Answer 8

将未知高度和宽度的div居中

水平和垂直。它可以与相当现代的浏览器（Firefox、Safari/WebKit、Chrome、Internet&Explorer&10、Opera等）配合使用

.内容{位置：绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）；}

<div class=“content”>这适用于任何内容

进一步修补代码笔或上的JSBin公司.

Answer 9

设置宽度并设置边缘左侧和边缘向右到汽车.那是仅用于水平尽管如此。如果你想要两种方式，你只需要两种方式。不要害怕实验；你不会打碎任何东西。

Answer 10

如果不给它一个宽度，它就不能居中。否则，默认情况下，它将占用整个水平空间。

Answer 11

CSS 3的box-align属性

#外部{宽度：100%；高度：100%；显示：框；盒子方向：水平；盒子包装：中心；盒对齐：居中；}

<div id=“outer”>Foo-Foo</div>

Answer 12

我通常使用绝对位置：

#内部{左：0；右：0；左边距：自动；边缘-右侧：自动；位置：绝对；}

<div id=“outer”>Foo-Foo</div>

外部div不需要任何额外的属性即可运行。

Answer 13

我最近不得不将一个“隐藏的”div（即。，显示：无；)里面有一个表格，需要放在页面中央。我编写了以下jQuery代码来显示隐藏的div，然后将CSS内容更新为自动生成的表格宽度，并将边距更改为居中

注：我正在分享这段代码，因为谷歌把我带到了这个堆栈溢出解决方案中，除了隐藏元素没有任何宽度，并且在显示之前不能调整大小/居中之外，其他一切都会起作用。

$（函数（）{$（'#inner'）.show（）.width（$（''#inerTable'）.widdh（））.css（'margin'，'0auto'）；});

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“inner”style=“display:none；”><form action=“”><table id=“innerTable”>姓名：电子邮件：电子邮件：</表格></form></div>

Answer 14

对于Firefox和Chrome：

<div style=“width:100%；”>文本</div>

对于Internet Explorer、Firefox和Chrome：

<div style=“width:100%；text-align:center；”><div style=“width:50%；margin:0px auto；text-align:left；”>文本</div>

这个文本对齐：属性对于现代浏览器是可选的，但对于旧式浏览器支持，它在Internet Explorer Quirks模式下是必需的。

Answer 15

使用：

#外部Div{宽度：500px；}#内部分区{宽度：200px；边距：0自动；}

<div id=“outerDiv”>内部内容</div>

Answer 16

另一个不必为其中一个元素设置宽度的解决方案是使用CSS3转型属性。

#外部{位置：相对；}#内部{位置：绝对；左：50%；转换：translateX（-50%）；}

<div id=“outer”>Foo-Foo</div>

诀窍在于翻译X（-50%）设置#内部元素自身宽度左侧的50%。您可以使用相同的技巧进行垂直对齐。

这里有一个小提琴显示水平和垂直对齐。

有关更多信息，请访问Mozilla开发者网络.

Answer 17

Chris Coyier写了一篇优秀职位关于他的博客上的“以未知为中心”。这是多种解决方案的综合。我发布了一个没有在这个问题中发布的。它比柔性接线盒解决方案，而您没有使用显示：表格；这可能会打破其他东西。

/*此父项可以是任意宽度和高度*/#外部{文本对齐：居中；}/*幽灵被轻推以保持完美居中*/#外部：之前{内容：'.'；显示：嵌入式块；高度：100%；垂直对齐：中间；宽度：0；溢出：隐藏；}/*要居中的元素可以也可以是任何宽度和高度*/#内部{显示：嵌入式块；垂直对齐：中间；宽度：300px；}

<div id=“outer”>Foo-Foo</div>

Answer 18

我最近找到了一种方法：

#外部{位置：绝对；左：50%；}#内部{位置：相对；左：-50%；}

<div id=“外部”>Foo-Foo</div>

两个元素必须具有相同的宽度才能正常工作。

Answer 19

例如，请参见这个链接以及下面的代码片段：

div#外部{高度：120px；背景色：红色；}div#内部{宽度：50%；高度：100%；背景颜色：绿色；边距：0自动；文本对齐：居中；/*用于将文本水平居中对齐*/线高：120px；/*用于将文本垂直居中对齐*/}

<div id=“outer”style=“width:100%；”>Foo-Foo</div>

如果您在父级下有很多子级，那么您的CSS内容必须如下所示小提琴示例.

HTML内容如下所示：

<div id=“outer”style=“width:100%；”><div class=“inner”>Foo文本</div>Foo文本Foo文本<div class=“internal”></div><div class=“internal”></div><div class=“internal”></div><div class=“internal”></div><div class=“inner”></div>Foo文本</div>

那么看看这个小提琴示例.

Answer 20

仅水平居中

根据我的经验，使方框水平居中的最佳方法是应用以下属性：

容器：

• 应该有文本对齐：居中；

内容框：

• 应该有显示：嵌入式块；

演示：

.容器{宽度：100%；高度：120px；背景：#CCC；文本对齐：居中；}.中心内容{显示：嵌入式块；背景：#FFF；填充：20px；边框：1px实心#000；}

<div class=“container”><div class=“centered-content”>居中！</div></div>

另请参见这个小提琴!

---

水平和垂直居中

根据我的经验，盒子居中的最佳方法二者都垂直和水平方向使用附加容器并应用以下属性：

外部容器：

• 应该有显示：表格；

内部容器：

• 应该有显示：table-cell；
• 应该有垂直对齐：中间；
• 应该有文本对齐：居中；

内容框：

• 应该有的显示：嵌入式块；

演示：

.外部容器{显示：表格；宽度：100%；高度：120px；背景：#CCC；}.内部控制器{显示：table-cell；垂直对齐：中间；文本对齐：居中；}.中心内容{显示：嵌入式块；背景：#FFF；填充：20px；边框：1px实心#000；}

<div class=“outer-container”><div class=“inner-container”><div class=“centered-content”>居中！</div></div></div>

另请参见这个小提琴!

Answer 21

这种方法也很有效：

#外部{/*div.container*/显示：flex；justify-content：中心；/*用于水平对齐*/对齐项目：居中；/*用于垂直对齐*/}

<div id=“outer”>Foo-Foo</div>

对于内部<div>，唯一的条件是高度和宽度不得大于其容器的尺寸。

Answer 22

柔性接线盒

显示：柔性其行为类似于块元素，并根据flexbox模型布局其内容。它可以与justify-content：中心.

请注意：Flexbox兼容除Internet Explorer以外的所有浏览器。请参见display:flex在Internet Explorer上不工作获取浏览器兼容性的完整和最新列表。

#内部{显示：嵌入式块；}#外部{显示：flex；justify-content：中心；}

<div id=“outer”>Foo-Foo</div>

---

文本对齐：居中

应用文本对齐：居中内联内容在行框中居中。然而，由于默认情况下内部div具有宽度：100%您必须设置特定的宽度或使用以下选项之一：

• 显示：块
• 显示：内联
• 显示：内联块

#内部{显示：嵌入式块；}#外部{文本对齐：居中；}

<div id=“outer”>Foo-Foo</div>

---

边距：0自动

使用边距：0自动是另一个选项，它更适合与旧浏览器兼容。它与显示：表格.

#内部{显示：表格；边距：0自动；}

<div id=“outer”>Foo-Foo</div>

---

转换

变换：平移用于修改CSS视觉格式模型的坐标空间。使用它，可以平移、旋转、缩放和倾斜元素。要水平居中，需要位置：绝对和左：50%.

#内部{位置：绝对；左：50%；转换：转换（-50%，0%）；}

<div id=“outer”>Foo-Foo</div>

---

<中心>（已弃用）

标签<中心>是HTML替代文本对齐：居中。它可以在旧浏览器和大多数新浏览器上使用，但由于此功能过时的并已从Web标准中删除。

#内部{显示：嵌入式块；}

<div id=“outer”><中心>Foo-Foo</中心></div>

Answer 23

最简单的方法：

#外部{宽度：100%；文本对齐：居中；}#内部{边距：自动；宽度：200px；}

<div id=“outer”>布拉布拉</div>

Answer 24

Flex的浏览器支持覆盖率超过97%，可能是在几行内解决此类问题的最佳方法：

#外部{显示：flex；justify-content：中心；}

<div id=“outer”>Foo-Foo</div>

Answer 25

如果内容的宽度未知，您可以使用以下方法。假设我们有这两个元素：

• .外部--全宽度
• .内部--未设置宽度（但可以指定最大宽度）

假设元素的计算宽度分别为1000像素和300像素。按以下步骤进行：

1. 包裹.内部里面.中心帮助器
2. 制造商.中心帮助器内联块；它的大小与.内部使其宽300像素。
3. 推动.中心帮助器相对于母公司50%的权利；这将其左侧设置为外500像素。
4. 推动.内部相对于母公司剩余50%；这将其左侧放置在-150像素wrt.center辅助对象处，这意味着其左侧放置在500-150=350像素wrt.outer处。
5. 将溢出设置为.外部隐藏以防止水平滚动条。

演示：

车身{字体：medium sans-serif；}.外部{溢出：隐藏；背景色：狗仔队；}.中心帮助器{显示：嵌入式块；位置：相对；左：50%；背景色：巴利伍德；}.内部{显示：嵌入式块；位置：相对；左：-50%；背景色：小麦色；}

<div class=“outer”><div class=“center-helper”><div class=“内部”><h1>没有定义宽度的div</h1><p>Lorem ipsum悲哀坐在amet，奉献敬爱的精英<br>杜伊斯调味品sem non-turpis consectetur blandit<br>Donec dictum risus id orci ornare tempor的名言<br>Proin pharetra预言了一个lorem elementum molestie<br>Nunc nec就坐在amet nisi temp viverra就坐在一个ipsum</p>（第页）</div></div></div>

Answer 26

这是你最快想要的。

JSFIDDLE公司

#外部{页边距-顶部：100像素；高度：500像素；/*你可以设置任何你想要的*/边框：1像素实心#ccc；}#内部{边框：1像素实心#f00；位置：相对；最高：50%；转换：translateY（-50%）；}

Answer 27

你可以这样做

#集装箱{显示：表格；高度：/*容器的高度*/；width:/*容器的宽度*/；}#内部{显示：table-cell；边距：0自动；文本对齐：居中；垂直对齐：中间；width:/*您的中心div的宽度*/；}

这也将对齐#内部垂直地。如果不想，请删除显示和垂直对齐属性；

Answer 28

你可以使用显示：柔性对于外部div和水平居中，您必须添加justify-content：中心

#外部{显示：flex；调整内容：居中；}

或者你可以访问w3schools-CSS flex属性了解更多想法。

Answer 29

您只需使用柔性接线盒这样地：

#外部{显示：flex；justify-content：中心}

<div id=“outer”>＜div id=“inner”＞Foo Foo＜/div＞</div>

为所有浏览器支持应用自动前缀：

#外部{显示：-webkit-box；显示：-ms-flexbox；显示：flex；宽度：100%；-webkit-box-pack：中心；-ms-flex-pack：中心；justify-content：中心}

或者其他

使用转型:

#内部{位置：绝对；左：50%；转换：转换（-50%）}

<div id=“outer”>Foo-Foo</div>

使用自动前缀：

#内部{位置：绝对；左：50%；-webkit-transform：翻译（-50%）；-ms-transform：翻译（-50%）；转换：转换（-50%）}

Answer 30

我发现存在一个选项：

每个人都说要使用：

边距：自动0；

但还有另一种选择。为父div设置此属性任何时候都能完美工作：

文本对齐：居中；

看，孩子去中心。

最后是CSS：

#外部{文本对齐：居中；显示：块；/*或者内联块-根据您的需要*/}#内部{位置：相对；边距：0自动；/*这样很好*/}