Div居中

1 margin:0 auto

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

如果针对的是IE8+的浏览器，不用设置width也可以：

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

2 left:50%

假设外层Div的大小是200px，那么内层这样设计可以居中：

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

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

3 水平居中

3.1 文字/链接水平居中

它们是inline或者inline-*元素：

.center-children {
  text-align: center;
}

3.2 块元素

.center {
  margin: 0 auto;
  width: 200px;
}

注意，你在这种情况下，不能在.center中添加float属性。

3.3 多个块元素

方法一：

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

依靠text-align:center和display:inline-block来使多个元素居中。

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

方法二：

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

使用CSS3的flex布局：

.flex-center {
  display: flex;
  justify-content: center;
}

4 垂直居中

如果它们是inline或者inline-*元素：

4.1 单行inline文字/链接垂直居中：padding

单行文字，靠设置上内边距和下内边距相等即可

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果padding不可以的话，在确认文字不会wrap的情况下，使line-height和height相等同样可以使text居中：

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

4.2 多行inline文字/链接垂直居中:table、flexbox、ghost element

通过设置padding-top和padding-bottom相同的内边距，也同样可以使文字居中。如果不起作用的话，可能是文字位于table cell中，使用vertical-align:middle可以解决这种情况。

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

通过将display设置为table格式，我们可以模拟table的样式，vertical-align就是设置table中一个row的样式的：

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

实在不行的话，你可以使用CSS3的flexbox，居中将会是很容易的一件事：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

最后一种，可以使用一种被称之为幽灵元素的技巧，一个full height伪元素被放在容器内，文字垂直居中于这个元素：

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

4.3 高度已知的块级元素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

4.4 高度未知的块级元素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4.5 使用flexbox

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

5 同时垂直和居中

5.1 有固定的宽度和高度

使用和宽度和高度一半相同的负的margin：

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

5.2 宽度和高度未知

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

5.3 使用flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

参考1 参考2