子元素宽高固定

/* 公共代码 */
.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
}

.box {
  background: green;
}

.box.size {
  width: 100px;
  height: 100px;
}
/* 公共代码 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

absolute + 负 margin

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

absolute + margin auto

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

absolute + calc

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
  position: relative;
}
.box {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}
1
2
3
4
5
6
7
8
9
10
11
12

after+vertical-align

<div id="wrap">
  <span
    >xcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdc dc xcdcdc
    xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc
    xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc
    xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc
    xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc xcdcdc xcdcdcxcdcdc xcdcdc
    xcdcdc xcdcdc
  </span>
</div>
1
2
3
4
5
6
7
8
9
10

里面的容器的 max-width 最大是外面的容器的 width 的值-5

#wrap {
  width: 500px;
  height: 500px;
  background-color: #ff000030;
}
#wrap:after {
  content: '';
  display: inline-block;
  height: 100%;
  width: 0px;
  vertical-align: middle;
  background-color: blue;
}
#wrap span {
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  max-width: 495px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其实差几像素没有完全居中

子元素宽高不固定

absolute + transform

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13

line-height+vertical-align

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
  line-height: 300px;
  text-align: center;
  font-size: 0px;
}
.box {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  text-align: left; /* 修正文字 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

writing-mode+text-align

<div class="wp">
  <div class="wp-inner">
    <div class="box">123123</div>
  </div>
</div>
1
2
3
4
5
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
  writing-mode: vertical-lr;
  text-align: center;
}
.wp-inner {
  writing-mode: horizontal-tb;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.box {
  display: inline-block;
  margin: auto;
  text-align: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

table

<table>
  <tbody>
    <tr>
      <td class="wp">
        <div class="box">123123</div>
      </td>
    </tr>
  </tbody>
</table>
1
2
3
4
5
6
7
8
9

tabel 单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

.wp {
  text-align: center;
}
.box {
  display: inline-block;
}
1
2
3
4
5
6

table-cell

.wp {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.box {
  display: inline-block;
}
1
2
3
4
5
6
7
8

flex

.wp {
  display: flex;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5

grid

.wp {
  display: grid;
}
.box {
  align-self: center;
  justify-self: center;
}
1
2
3
4
5
6
7

图片垂直水平居中

其实差几像素没有完全居中

<div id="wrap"><img src="a.jpg" /></div>
1
#wrap {
  text-align: center;
}
#wrap:after {
  content: '';
  display: inline-block;
  height: 100%;
  width: 0px;
  vertical-align: middle;
}
#wrap img {
  vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

TOC