我写代码时所遵守的代码规范

• HTML
• 标签有始有终（闭合）
• 尽量遵循语义化，不滥用div
• 命名尽量通过功能命名，使用较为准确的单词（模仿他人较好的命名）
• 属性加引号
• 一块内容写一行，有嵌套的时候外层头尾各一行
• 用空格缩进
• CSS
• " { " 前边有空格， " } "单独占一行
• " : "后面空一格
• 一个声明单独占一行
• 依照HTML里标签的顺序写CSS
• 用空格缩进
• 每个声明结尾都有 " ; "
• class的命名功能化、准确化

垂直居中

1. Padding垂直居中

.layout {
  width: 700px;
  background-color: #52e5e7;
  text-align: center;
  padding: 20px;/* 居中Demo */
  color: #fff;
}
.layout>p {
  font-size: 30px;
  font-weight: bold;
  font-family: helvetica;
}

2. Vertical-align + Inline-block

main {
  /* width:100px; */
  display: inline-block;/* 居中Demo */
  vertical-align: middle;/* 居中Demo */
}
/* 垂直demo */
.wrapper::before {
  content: " ";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
/* 垂直demo */

3. Position垂直居中

.layout>.h-card {
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.3);
}
.h-card>.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  color: #fff;
  border: 5px solid;
  border-radius: 5px;
  box-shadow: 5px 8px 5px rgba(0,0,0,.3), 8px 10px 15px rgba(0,0,0,.2);
}

4. Flex + Align-items垂直居中

.layout {
  background-color: #2196f3;
  height: 400px;
  width: 400px;
  margin: 0 auto;
  display: flex;
  align-items: center;/* 居中demo */
}

5. Height=Line-height垂直居中

.wrap>h1 {
  line-height: 200px;/* 居中demo */
}

6. Table-cell + Vertical-align垂直居中

.wrap {
  background-color: #2196f3;
  height: 300px;
  width: 300px;
  display: table-cell;/* 居中Demo */
  vertical-align: middle;/* 居中Demo */
}

代码

JSBin
注：旋转demo

transform: rotate( __deg)