一. 水平垂直居中

1. 绝对定位 + 负margin

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  height: 500px;
  border: 1px solid red;
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;  /* 宽度的-50% */
  margin-top: -50px;    /* 高度的-50% */
}

缺点：需要固定居中元素的宽高。

2. 绝对定位 + margin: auto

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  height: 500px;
  border: 1px solid red;
  position: relative;
}
.child {
  border: 1px solid green;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

缺点：需要固定居中元素的宽高，否则其宽高会被设为100%

3. 绝对定位 + translate

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  height: 500px;
  border: 1px solid red;
  position: relative;
}
.child {
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

优点：不需要固定居中元素的宽高。

4. flex 布局

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  height: 500px;
  border: 1px solid red;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}
.child {
  border: 1px solid green;
  width: 300px;
}

优点：不需要固定居中元素的宽高。

兼容性：目前移动端已经完全可以使用 Flex 布局，而 PC 端某些旧浏览器支持度不高。

5. 单行文本的水平垂直居中

HTML

<p class="content">
    单行文本单行文本单行文本
</p>

CSS

.content {
  border: 3px solid red;
  line-height:300px;
  text-align:center;
}

二. 水平居中

1. margin auto

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  border: 3px solid red;
}
.child {
  border: 3px solid blue;
  width: 300px;
  margin: 0 auto;
}

缺点：需要固定居中元素的宽。

2. text-align + inline-block

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  border: 3px solid red;
  text-align: center;
}
.child {
  border: 3px solid blue;
  width: 300px;
  display: inline-block;
  text-align:left;  /* 重置文本位置 */
}

缺点：为了居中元素，文本也跟着居中了，因此可能需要重置文本位置。

三. 垂直居中

1. table 自带功能

HTML

<table class="parent">
    <tr>
      <td class="child">
        一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字
      </td>
    </tr>
</table>

CSS

.parent {
  border: 1px solid red;
  height: 600px;
}
.child {
  border: 1px solid green;
}

2. div 伪装成 table

HTML

<div class="table">
    <div class="td">
      <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
    </div>
</div>

CSS

div.table {
  display: table;
  border: 1px solid red;
  height: 500px;
}
div.tr {
  display: table-row;
  border: 1px solid green;
}
div.td {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid blue;
}
.child {
  border: 3px solid black;
}

3. 100% 高度的 after before 加上 inline-block

HTML

<div class="parent">
    <div class="child">一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</div>
</div>

CSS

.parent {
  border: 3px solid red;
  height: 500px;
  text-align: center;
}
.child {
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}
.parent::before {
  content: '';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent::after {
  content: '';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}