文字上下左右居中

基本方法:

.center {
  text-align: center;       #水平居中,对block元素生效
  margin: auto;              //垂直居中, 对block元素生效
  vertical-align: middle; //垂直居中,对inline-level 和 'table-cell' 元素生效
}

方法一: 用table cell

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

方法二: 用flexbox

<!-- HTML -->
<div class="wrapper">
   <div>Hi</div>
</div>

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
}