一.水平垂直居中

1.绝对定位+margin:auto

.box {
  width: 500px;
  height: 100px;
  border: 5px solid black;
  position: relative;
}
.box1 {
  width: 100px;
  height: 80px;
  background: red;
  margin: auto;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
}

2.绝对定位+负margin

.box {
  width: 500px;
  height: 100px;
  border: 5px solid black;
  position: relative;
}
.box1 {
  width: 100px;
  height: 80px;
  background: red;
  margin: -40px -50px;
  position: absolute;
  left: 50%;top: 50%;
}

3.绝对定位+transform

.box {
  width: 500px;
  height: 100px;
  border: 5px solid black;
  position: relative;
}
.box1 {
  width: 100px;
  height: 80px;
  background: red;
  position: absolute;
  left: 50%;top: 50%;
  transform: translate(-50%,-50%);
}

4.flex布局

.box {
  width: 500px;
  height: 100px;
  border: 5px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1 {
  width: 100px;
  height: 80px;
  background: red;
}

二.水平居中

1.行内元素或设置子元素display: inline-block

.box {
  width: 500px;
  height: 100px;
  border: 5px solid black;
  text-align: center;
}

2.定宽块级元素

.box {
  width: 500px;
  height: 100px;
  border: 5px solid black;
}
.box1 {
  width: 100px;
  height: 80px;
  background: red;
  margin: 0 auto;
}

3.flex

4.绝对定位+负margin

5.绝对定位+transform

6.绝对定位+margin:auto

三.垂直居中

1.单行文本

line-height=height

2.父元素无高度

padding-top=padding-bottom

3.table自带

4.多行文本

父元素display:table，子元素display:table-cell,vertical-align:middle

5.flex

6.绝对定位+负margin

7.绝对定位+transform

8.绝对定位+margin:auto