谈谈CSS

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

• HTML 缩进采用两个空格，样式名称使用‘-’，使用小写字母，尽量语义化
• CSS 缩进采用两个空格。css顺序尽量与html结构保持一致
• 其他参考编码规范或与团队保持统一

垂直居中案例

• padding上下一致，挤压居中

<div class="box">
    <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
  </div>

.box {
  width:300px;
  border:1px solid;
  text-align: center;
  padding:40px 0px;
}

• 绝对定位实现居中

 <div class="layout">
    <div class="box">
    </div>
 </div> 

.layout {
  width:600px;
  height:600px;
  border:1px solid;
  text-align: center;
  position: relative; 
}
.box {
  width:300px;
  height:100px;
  border:1px solid;
  text-align: center;
  padding:40px 0px;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

• vertical-align和伪元素结合实现居中

  <div class="box">
    <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
  </div>

.box{
  width:400px;
  height:400px;
  border:1px solid  black;
  text-align:center;
}
.box:before {
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.box img{
  vertical-align:middle;
}

• table-cell实现居中，将父级元素表格单元格式化

 <div class="box">
    <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
  </div>

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

• flex-box轻松实现居中

display:flex;
align-items:center;