编码规范and垂直居中

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

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

---

垂直居中的几种实现方式

父容器上下padding相等

  
让我垂直居中

绝对定位实现垂直居中

 


  
 今天下雨了 

使用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;
}


  aaa

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

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


 aaa

使用 flex

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


  aaa