编码规范and垂直居中

用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，确保全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位

详情 : 编码规范
Google HTML/CSS Style Guide
Naming CSS Stuff Is Really Hard

垂直居中的几种实现方式

父容器上下padding相等

<style>
.box {
  padding: 50px 0;
  text-align: center;
}
</style>

<div class="box">
  <p>让我垂直居中</p>
</div>

绝对定位实现垂直居中

<style>
.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
}
</style> 

<div class="box">
  <p> 今天下雨了 </p>
</div>

使用vertical-align

.box {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  text-align: center;
}
 .box: before {
 content:" ";
 display: inline-block;
 vertical-align: middle;
 height: 100%;
}
.test {
 vertical-align: middle;
}

<div class="box">
  <span class="test">aaa</span>
</div>

把父元素设置为 dispaly: table-cell; 然后使用vertical-align 垂直居中

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

<div class="box">
 <span>aaa</span>
</div>

使用 flex

.box{
  border: 1px solid black;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
 align-items: center;
} 

<div class="box">
  <span>aaa</span>
</div>