说一说你平时写代码遵守的编码规范

HTML
1.用两个空格键代替tab键。
2.尽可能使用语义化的标签。
3.尽可能减少使用嵌套，使结构简洁明了。
4.定义属性全部用双引号。
5.嵌套元素缩放两个空格。
6.闭合标签。
7.把引入的css写在头部，公共的css放在最前面，便于后面覆盖某些特定样式，js链接放在</body>前面。

CSS
1.声明块的右花括号单独成行
2.: 后面加一个空格
3.每个属性单独一行。
4.每个属性以分号结尾。
5.对于属性值或颜色参数，省略小于 1 的小数前面的 0。
6，颜色值使用十六进制形式，尽可能使用简写的十六进制值，比如#000。
7.0值时不指定单位。
8.声明的顺序是先位置，自身的属性，如宽高，文字相关，最后是其他。
9.将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。
10.命名基于功能和内容命名。

垂直居中有几种实现方式，给出代码范例

1.使用上下paddng相等，不管中间加几行字都是居中的。
预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .content {
             margin: 0 auto;
             padding: 30px 0;
             width: 600px;
             border: 1px solid;
             text-align: center;
         }
    </style>
</head>
<body>
   <div class="content">
       <p>垂直居中</p>
       <p>垂直居中</p>
       <p>垂直居中</p>
       <p>垂直居中</p>
   </div>
</body>
</html>

2.绝对定位垂直居中，比如弹框，并且知道了弹框的宽高。
预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tipbox-bg {
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.4);
        }
        .tipbox {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -150px;
            width: 400px;
            height: 300px;
            background: #fff;
        }
        .tipbox h1 {
            text-align: center;
            background: #38B774;
            color: #fff;
            margin: 0;
        }
    </style>
</head>
<body>
  <div class="tipbox-bg">
      <div class="tipbox">
          <h1>头部</h1>
      </div>
  </div>
</body>
</html>

3.使用css3的transform中的translate的属性，此方法有兼容性的问题。
预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tipbox-bg {
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.4);
        }
        .tipbox {
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
            width: 300px;
            background: #fff;
        }
        .tipbox h1 {
            text-align: center;
            background: #38B774;
            color: #fff;
            margin: 0;
        }
        .content {
            padding: 50px 0;
            text-align: center;
        }
    </style>
</head>
<body>
  <div class="tipbox-bg">
      <div class="tipbox">
          <h1>头部</h1>
          <div class="content">
              内容
          </div>
      </div>
  </div>
</body>
</html>

4.vertical-align，针对行内元素和表格，文字的垂直居中。
测试了一下，好像只有div内的所有inline-display元素都是middle才生效。
预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 500px;
            margin: 0 auto;
            height: 400px;
            border: 1px solid;
            text-align: center;
        }
        .box:after{
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
  <div class="box">
      ![](images/pro3.jpg)
  </div>
</body>
</html>

5.使用display:table-cell
预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 500px;
            height: 400px;
            border: 1px solid;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
  <div class="box">
      ![](images/pro3.jpg)
  </div>
</body>
</html>

总结：第五种方法，把改变了块级元素的展现方式，所以box的margin：0 auto；失效了，建议少使用。