编码规范和垂直居中 #12
Description
编码规范
1.所有命名都使用英文小写；
2.尽量不用缩写；
3.使用有意义的命名，根据功能内容等命名;
4.使用两个空格进行缩进；
5.css属性每条属性占一行，属性后面加分号；
6.class="layout";命名加双引号；
7.为了代码好看，注意空格使用，大括号前加空格，属性冒号后加空格；例如：
.layout {
max-width: 900px;
}
8.尽量减少使用width,用min-width和max-width代替；
9.命名使用中划线-连接；
10.小数不用写前缀, 0.5s -> .5s；0不用加单位；
11.尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px;
12.颜色用小写，用缩写, #fff;
垂直居中方式
- 父容器高度不固定，元素垂直居中：
设置上下padding相同；
<body>
<div class="ct">
<p>我是谁</p>
<p>我在哪</p>
</div>
</body>
.ct{
padding: 40px 0;
text-align: center;
background: #eee;
}
- 父容器高度固定，行内元素居中：
利用text-align:center、伪元素、vertical-align: middle;实现居中
<body>
<div class="box">
<img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>
</body>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
- 父容器高度固定，块级元素（元素宽高固定）居中：
利用绝对定位，负margin实现居中
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
html,body {
height: 100%;
}
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
- 父容器高度固定，块级元素（元素宽高不固定）居中：
利用绝对定位，transform实现居中
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
html,body {
height: 100%;
}
.dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
- 父容器高度固定，行内元素或块级元素垂直居中：
利用display: table-cell和vertical-align:middle、实现垂直居中。
<body>
<div class="box">
<img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>
</body>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
- 黑科技flex实现居中：
<body>
<div class="box">
<p>hhllll</p>
<span>111</span>
</div>
</body>
.box{
width: 300px;
height: 200px;
border: 1px solid red ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.box p {
border: 1px solid red;
width: 100px;
}
.box span {
border: 1px solid green;
}