我如何水平居中？

Question

如何使用 CSS 将

水平居中于另一个

中？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 1

使用 flexbox 可以非常轻松地水平和垂直居中设置 div 的样式。

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

要将 div 垂直居中对齐，请使用属性 align-items: center。

---

其他解决方案

您可以将此 CSS 应用于内部

：

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将 width 设置为 <代码>50%。任何小于包含

的宽度都可以。 margin: 0 auto 是实际居中的内容。

如果您的目标是 Internet Explorer 8（及更高版本），则最好使用此相反：

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定的宽度即可工作。

工作示例在这里：

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 2

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

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

这使得内部 div 成为一个内联元素，可以使用 text-align 居中。

Answer 3

带 Flexbox 的现代盒子模型

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

旧盒子模型（已弃用）

display: box 及其属性 box-pack、box-align、box-orient、box-direction等已被flexbox取代。虽然它们仍然可以工作，但不建议在生产中使用它们。

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

根据您的可用性，您还可以使用 box-orient、box-flex、box-direction 属性。

了解有关将子元素居中的更多信息

• CSS 盒子模型模块级别 3< /p>

• 盒子模型 (CSS2)

• MDN 上的框对齐

以及这个解释了为什么盒模型是最好的方法：

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

Answer 4

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

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

如果您不知道DIV的宽度，则可以使用变换：Translatex（-50％）; 而不是负差。

使用 css calc（），代码可以变得更简单：

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

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

Answer 5

我已经创建了这个示例显示如何 vertally 和水平 对齐。

代码基本上是这样：

#outer {
  position: relative;
}


/* and */

#inner {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

Answer 6

一些海报已经提到了CSS＆nbsp; 3使用显示：box 。

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

因此，仅出于完整性，这是使用 。

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

如果您需要支持较旧的浏览器，这些浏览器将使用较旧的语法用于Flexbox 这是一个好地方。

Answer 7

如果您不想设置固定宽度并且不需要额外的边距，请将 display: inline-block 添加到您的元素中。

您可以使用：

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 8

将高度和宽度未知的 div

水平和垂直居中。它适用于相当现代的浏览器（Firefox、Safari/WebKit、Chrome、Internet & Explorer & 10、Opera 等）

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

在 Codepen 或 JSBin。

Answer 9

设置 width 和SET Margin-Left 和 Margin-Right to auto 。不过，对于水平来说，这是。如果您需要这两种方式，那么您只需两种方式做。不要害怕试验；这并不是您会破坏任何东西。

Answer 10

如果您不给它一个宽度，则不能集中。否则，默认情况下将需要整个水平空间。

Answer 11

CSS 3 的 box-align 属性

#outer {
  width: 100%;
  height: 100%;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 12

我通常这样做的方式是使用绝对位置：

#inner {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

外部DIV不需要任何额外的属性才能起作用。

Answer 13

最近，我不得不将一个“隐藏”div（即 display:none;）居中，其中有一个表格表单需要在页面上居中。我编写了以下 jQuery 代码来显示隐藏的 div，然后将 CSS 内容更新为自动生成的表格宽度，并更改边距以使其居中。 （显示切换是通过单击链接触发的，但不需要显示此代码。）

注意：我共享此代码，因为 Google 将我带到了此 Stack Overflow 解决方案以及所有内容本来可以工作，除非隐藏元素没有任何宽度，并且在显示之前无法调整大小/居中。

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<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">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 14

对于Firefox和Chrome：

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

对于Internet＆nbsp; Explorer，Firefox和Chrome：

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align：属性是现代浏览器的可选，但是在Internet＆nbsp; Explorer Quirks Mode中有必要用于传统浏览器支持。

Answer 15

使用：

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

为此解决的另一个解决方案而无需为其中一个元素设置宽度是使用CSS 3 transform 属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

诀窍是 translatex（-50％）设置 #inner 元素在其自身宽度的左侧50％。您可以将相同的技巧用于垂直对齐。

这是一个 fiddle 显示水平和垂直比对。

更多信息在

Answer 17

Chris Coyier 撰写了一篇关于“以未知为中心”的优秀文章他的博客。这是多种解决方案的汇总。我发布了一个未在此问题中发布的内容。它比 Flexbox 解决方案提供更多的浏览器支持，并且您没有使用 display : table; 这可能会破坏其他东西。

/* 这个父级可以是任意宽度和高度 */

#外层{
  文本对齐：居中；
}


/* 幽灵，被轻推以保持完美居中 */

#outer:之前{
  内容： '。';
  显示：内联块；
  高度：100%；
  垂直对齐：居中；
  宽度：0；
  溢出：隐藏；
}


/* 要居中的元素，可以
       也可以是任意宽度和高度*/

#内部{
  显示：内联块；
  垂直对齐：居中；
  宽度：300px；
}

  
Foo foo
;

Answer 18

我最近找到了一个方法：

#outer {
  position: absolute;
  left: 50%;
}

#inner {
  position: relative;
  left: -50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

Answer 19

例如，请参阅此链接和下面的代码片段：

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

如果你的父母有很多孩子，那么你的 CSS 内容必须像这样 fiddle 上的示例 。

HTML 内容如下所示：

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

然后查看这个 fiddle 上的示例。

Answer 20

仅根据我的经验进行水平居中

，水平居中的最佳方法是应用以下属性：

容器：

• 应该具有 text-align：中心;

content框：

• 应该具有显示显示：inline-block;

演示：

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

另请参见 这个小提琴 ！

---

水平居中 从我的经验上讲

，将盒子中心的最佳方法 在垂直和水平上都使用其他容器并应用以下属性：

外容器：

• 应该具有 display：display：table;

内部容器：

• 应该具有显示：table-cell;
• 应该具有垂直align：中间;
• 应该具有 text-align：center; center;

内容框：

• 应该具有显示：inline-block;

emo：demo：

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

另请参见 这个小提琴 ！

Answer 21

这个方法也可以正常工作：

#outer { /*div.container*/
  display: flex;
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment   */
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

对于内部

，唯一的条件是其 height 和 width 不得大于其容器的高度和宽度。

Answer 22

Flexbox

display: flex 的行为类似于块元素，并根据 Flexbox 模型布局其内容。它适用于 justify-内容：居中。

请注意：Flexbox 兼容除 Internet Explorer 之外的所有浏览器。请参阅显示：flex 无法在 Internet Explorer 上运行完整且最新的浏览器兼容性列表。

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

文本对齐：中心

应用 text-align: center 内联内容在行框内居中。但是，由于内部 div 默认为 width: 100%，因此您必须设置特定宽度或使用以下其中一项：

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

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

保证金：0 自动

使用 保证金：0 自动 是另一种选择，它更适合旧浏览器的兼容性。它与 display: table 一起使用。

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

变换

变换：翻译 允许您修改 CSS 视觉格式化模型的坐标空间。使用它，可以平移、旋转、缩放和倾斜元素。要水平居中，需要 position:absolute< /code> 和 left ：50%。

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

---

（已弃用）

标签

是 文本对齐：居中。它适用于旧版浏览器和大多数新浏览器，但不被认为是一个好的做法，因为此功能 已过时并已从 Web 标准中删除。

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Answer 23

最简单的方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 24

Flex具有超过97％的浏览器支持覆盖范围，可能是在几行中解决此类问题的最佳方法：

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 25

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

• .outer - 完整宽度
• .inner - 没有宽度集（但是可以指定最大宽度）

假设该计算的宽度元素分别为1000像素和300像素。如下：

1. wrap .inner 内部 .center-Helper
2. make .center-Helper inline block;它变成与 .inner 使其宽300像素的大小相同。
3. 推送 .center-Helper 相对于其父级的50％；这将其左派放在500像素WRT处。外。
4. 按 .inner 相对于其父母剩下的50％；这将其左侧放在-150像素WRT。中心帮手，这意味着其左侧为500-150 = 350像素WRT。外。
5. 将Overflow设置为 .outer 隐藏以防止水平滚动条。

演示：

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Answer 26

你可以这样做，

#container {
    display: table;
    height: /* height of your container */;
    width: /* width of your container */;
}

#inner {
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: /* width of your center div */;
}

这也会垂直对齐#inner。如果您不想，请删除 display 和 vertical-align 属性；

Answer 27

这就是您想要的最短的方式。

JSFIDDLE

#outer {
  margin - top: 100 px;
  height: 500 px; /* you can set whatever you want */
  border: 1 px solid# ccc;
}

#inner {
  border: 1 px solid# f00;
  position: relative;
  top: 50 % ;
  transform: translateY(-50 % );
}

Answer 28

您可以使用 display：flex 对外部div和水平中心，必须添加 jusify-content：中心

#outer{
    display: flex;
    justify-content: center;
}

，或者您可以访问 w3schools -css flex属性属性以获取更多想法。

Answer 29

您只需使用 flexbox 像这样：

#outer {
    display: flex;
    justify-content: center
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

将自动改装器应用于所有浏览器支持：

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

否则

请使用变换：

#inner {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

使用AutoPrefixer：

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}

Answer 30

我发现存在一个选项：

每个人都说使用：

margin: auto 0;

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

text-align: center;

看，孩子走在中心。

最后为您提供 CSS：

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}