你平时写代码遵守的编码规范
- HTML 缩进采用两个空格，样式名称使用‘-’，使用小写字母，尽量语义化
- CSS 缩进采用两个空格。css顺序尽量与html结构保持一致
- 其他参考编码规范或与团队保持统一
垂直居中案例
<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%);
}
<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;
}
display:flex;
align-items:center;
