问题 如何在另一个

中水平居中

？

如果您不想在内部设置固定宽度 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%;
}

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

柔性：

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

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

• 链接2

• 链接3

• 链接4

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

• 为什么W3C盒型号更好？

假设你的div是 200px 宽：

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

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

如果您不知道div的宽度，可以使用 transform:translateX(-50%); 而不是负边际。

https://jsfiddle.net/gjvfxxdj/

我创造了这个 例 展示如何 垂直 和 水平  align。

代码基本上是这样的：

#outer {
  position: relative;
}

和...

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

它会留在 center 即使你 重新大小 你的屏幕。

一些海报提到了CSS 3使用中心的方式 display:box。

此语法已过时，不应再使用。 [也可以看看 这个帖子]。

所以这里只是为了完整性是使用CSS的中心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;
}

CSS3的box-align属性

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

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

以未知高度和宽度为中心

水平和垂直。它适用于相当现代的浏览器（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>

进一步修补它 Codepen 或者 JSBin。