如何将 <div> 水平居中?

我怎么能水平居中一个<div>另一个内<div>使用 CSS?

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

答案

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

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

当然,您不必将width设置为50% 。小于包含的<div>任何宽度将起作用。 margin: 0 auto是实际居中的内容。

如果您以 IE8 + 为目标,最好改用以下方法:

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

它将使内部元素水平居中,并且无需设置特定width

这里的工作示例:

#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>

如果您不想在内部div上设置固定宽度,则可以执行以下操作:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

这使内部div成为可以以text-align居中的内联元素。

最好的方法是使用CSS 3

箱型:

#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属性。

弹性

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

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

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

假设您的 div 宽度为200px

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

确保父元素的位置即相对,固定,绝对或粘性。

如果您不知道 div 的宽度,则可以使用transform:translateX(-50%);而不是负利润。

https://jsfiddle.net/gjvfxxdj/

编辑:使用 CSS calc,代码可以变得更加简单:

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

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

我创建了这个示例,以展示如何垂直水平 align

代码基本上是这样的:

#outer {
  position: relative;
}

和...

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

即使您调整屏幕大小 ,它也将保留在center

一些张贴者提到使用display:box居中的 CSS 3 方法。

该语法已过时,不应再使用。 [另请参阅此帖子]

因此,为了完整起见,这里是使用 “ 灵活框式布局模块”在 CSS 3 中居中的最新方法。

因此,如果您有简单的标记,例如:

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

... 并且您想将项目放在框中居中,这是您在父元素(.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 语法的旧版浏览器,那么这里是一个不错的地方。

如果您不想设置固定宽度并且不希望有多余的边距,请在您的元素中添加display: inline-block

您可以使用:

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

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

水平和垂直。它可以与相当现代的浏览器(Firefox,Safari / WebKit,Chrome,Internet Explorer 10,Opera 等)一起使用。

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

CodepenJSBin上进一步修补

CSS3 的 box-align 属性

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

如果不给定宽度,则不能居中,否则默认情况下它将占据整个水平空间。