这个方法也完全可行：

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

Flexbox

display: flex 表现为块级元素，并按照弹性布局模型排列其内容。它与 justify-content: center 一起使用。

请注意：Flexbox 可以兼容所有浏览器，除了 Internet Explorer。查看 display: flex not working on 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%，因此您需要设置特定的宽度或使用以下其中之一：

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

Margin: 0 auto

margin: 0 auto 是另一种选择，更适用于兼容较老浏览器。它需要与display: table 结合使用。

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

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

Transform

transform: translate可以修改CSS视觉格式模型的坐标系。使用它，元素可以平移、旋转、缩放和倾斜。要使其水平居中，需要使用position: absolute和left: 50%。

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

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

<center>（已弃用）

<center> 标签是 text-align:center 的 HTML 替代品。它适用于旧版浏览器和大多数新版浏览器，但由于该特性已被废弃并已从Web标准中删除，因此不再被认为是好的实践。

#inner {
  display: inline-block;
}

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

最简单的方法：

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

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

Flex 可以覆盖超过 97% 的浏览器支持，可能是解决这些问题的最佳方式，只需几行代码。

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

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

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

• .outer -- 宽度为1000像素;
• .inner -- 未设置宽度（但可能指定了最大宽度），宽度为300像素。

按照以下步骤进行：

1. 将 .inner 包装在 .center-helper 中；
2. 使 .center-helper 成为内联块级元素；它的大小与 .inner 相同，变成300像素宽；
3. 将 .center-helper 相对于其父元素向右移动50%；这将使其相对于 .outer 的左侧处于500像素位置；
4. 将 .inner 相对于其父元素向左移动50%；这将使其相对于中心帮助器的左侧处于-150像素位置，这意味着其相对于 .outer 的左侧位于350像素位置；
5. 将 .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>

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

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

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

以下是您想要的最简方式。

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 % );
}

您可以在外部 div 中使用 display: flex，并且要水平居中，则需要添加 justify-content: center。

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

或者您可以访问w3schools - CSS flex Property了解更多灵感。

您可以简单地使用Flexbox，像这样：

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

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

为所有浏览器支持应用 Autoprefixer：

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

否则

使用 transform：

#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%)
}

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

$(document).ready(function () {
  $('.container .content').each(function () {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});