编码规范、居中

编码规范

• class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。
• 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。如：

推荐：<div class="text-lesser"></div>
不推荐： <div class="light-grey"></div>

• 标签语义化

<article>
  <h1>编码规范</h1>
  <p>今天讲的内容是编码规范，讲师
     <b>若愚</b> @饥人谷</p>
</article>

• 用两个空格来代替制表符（tab）。
• 为选择器分组时，将单独的选择器单独放在一行。
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。
• 每条声明语句的 : 后应该插入一个空格。

• 参考：

• bootstrap 编码规范
• google html css编码规范
• 命名这货真难

居中

1. 上下padding相等：

.ct {
      padding: 40px 0;
      text-align: center;
      background: #eee;
      border: 1px solid red;
}

http://js.jirengu.com/xiyetevone/1/edit

2. 绝对定位的元素居中：

position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -200px;
  margin-top: -150px; 当宽度和高度固定的时候宽度和高度的一半*/
  transform: translate(-50%,-50%);
  width: 400px;
  height: 300px;

http://js.jirengu.com/waquyokaci/1/edit

4. 表格法实现居中：display: table-cell;

display: table-cell;
  vertical-align: middle;

http://js.jirengu.com/nape/1/edit?html,css,output

3. 行内元素居中： vertical-align: middle;
   http://js.jirengu.com/vetutacuwo/1/edit

分别使用一个html 标签来实现 这三个效果