一、父元素不定高

如果 .parent 的 height 不写，只需要 padding:10px 0;就能将 .child 垂直居中；
如果 .parent 的 height 写死了，可以用以下方式，将 .child 垂直居中。
能不写 height 就千万别写 height，让子元素撑开，或者用 max-height/min-height。

二、子元素定宽高

<div class="parent">
  <div class="child"></div>
</div>

1、绝对定位 + margin

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  position:relative;
}

.child{
  width: 100px;
  height: 100px;
  background-color:yellow;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
}

2、绝对定位 + transform

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  position:relative;
}

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

3、绝对定位 + top/right/bottom/left + margin:auto

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  position:relative;
}

.child{
  width: 100px;
  height: 100px;
  background-color:yellow;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
}

5、flex 布局

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.child{
  width: 100px;
  height: 100px;
  background-color:yellow;
}

6、grid 布局 + margin:auto

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:grid;
}

.child{
  width: 100px;
  height: 100px;
  background-color:yellow;
  margin:auto;
}

6、table-cell + vertical-align + margin:auto

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:table-cell;
  vertical-align:middle;
}

.child{
  width: 100px;
  height: 100px;
  background-color:yellow;
  margin:auto;
}

7、table-cell + vertical-align + text-align + inline-block

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

.child{
  width: 100px;
  height: 100px;
  background-color:yellow;
  display:inline-block;
}

8、tabel 自带功能

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

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

.child{
  border: 1px solid green;
}

三、子元素不定宽高

<div class="parent">
  <div class="child">html
    /css/
    javascript</div>
</div>

1、绝对定位 + transform

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  position:relative;
}

.child{
  background-color:yellow;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

2、table-cell + vertical-align + text-align + inline-block

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

.child{
  background-color:yellow;
  display:inline-block;
}

3、flex 布局

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.child{
  background-color:yellow;
}

4、flex 布局 + margin:auto

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:flex;
}

.child{
  background-color:yellow;
  margin:auto;
}

5、grid 布局 + margin:auto

.parent{
  width: 200px;
  height: 200px;
  border:1px solid red;
  display:grid;
}

.child{
  background-color:yellow;
  margin:auto;
}

6、::after/::before height:100% + 父元素不定宽 + inline-block

<div class="parent">
  <div class="child">htmlcssjavascripthtmlcssjavascripthtmlcssjavascript
    htmlcssjavascripthtmlcssjavascript
    htmlcssjavascript
  </div>
</div>

.parent{
  height: 200px;
  border:1px solid red;
  text-align:center;
}

.parent::after{
  content:"";
  outline:3px solid green;
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

/* .parent::before{
  content:"";
  outline:3px solid black;
  display:inline-block;
  height:100%;
  vertical-align:middle;
} */

.child{
  height: 100px;
  background-color:yellow;
  display:inline-block;
  vertical-align:middle;
}

内联元素

• 水平居中 行内元素：text-align:center;
  flex 布局设置父元素：display:flex; justify-content:center;

• 垂直居中 单行文本，父元素给定高度：height 等于 line-height；
  多行文本，父元素给定高度：display:table-cell; vertical-align:middle;