[codepen演示](https://codepen.io/BreeZh/pen/XWjVBbP

单行文本元素

/* 水平方向 */
text-align:center;
/* 垂直方向，行高与高度一致 */
line-height:与高度一致；

多行文本元素

/* 水平方向 */
text-align:center;
/* 垂直方向，不设置容器高度，设置padding */
padding: 20px 0;

行内块元素，如img

div {
  /* 水平方向 */
  text-align:center;
  /* 垂直方向，行高与高度一致 ， */
  line-height:与高度一致；
}
img {
  /*img的基准默认为bottom*/
  vertical-align:middle;
}