css水平垂直居中

文本水平垂直居中

div{
     text-align: center;
     line-height: height;
}

元素水平垂直居中

1. flex布局

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

2. absolute+负margin(子元素宽高明确)

.parent {
  width: 100%;
  height: 100%;
  position: relative;
}
.son {
  width: 100px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px; /*宽的一半*/
  margin-top: -100px; /*高的一半*/
}

3. absolute+margin:auto

.parent {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

4. absolute+transform

.parent {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #000;
}

.son {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

5. inline-block+vertical-aligin+line-height

.parent {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background-color: #000;
  text-align: center;
}
.son {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: inline-block;
  vertical-align: middle;
}

6. table-cell

.parent {
  width: 100px;
  height: 200px;
  background: #000;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.son {
  background: #fff;
  display: inline-block;
}

7. grid布局

.parent {
  width: 200px;
  height: 300px;
  display: grid;
  background-color: #000;
}

.son {
  width: 100px;
  height: 100px;
  align-self: center;
  justify-self: center;
  background-color: #fff;
}