CSS 综合

编码规范

1. 使用无 <code>bom</code> 的 <code>UTF-8</code>的编码格式
2. 首行缩进四个空格
3. 选择器与<code>{</code> 之间必须有空格，属性值以<code
4. 属性名与 <code>:</code> 之间不允许包含空格；<code>:</code>与属性值之间必须包含空格
5. 多个选择器一起设置属性时，一个选择器占据一行
6. 不使用 !important
7. 个人使用可以参考国内大公司的编码规范，共同之处就是重要的，一定要遵守的。工作的话就要跟随公司团队风格咯。

垂直居中

1. flex：

    .a{
    display:flex;
    }
    .b{
    margin: auto;
    }
   
    <div class="a">
    <div class="b"></div>
    </div>
   

</code>

2. 绝对定位：

   position  : absolute;
   top       : 50%;
   left      : 50%;
   transform : translate(-50%,-50%);
   

3. 文本的水平垂直居中：

    <div class=“title”>
    我是 title
    </div>
   
    .title {
     line-height: 400px;
     text-align:center;
    height: 400px;
    }
   

4. 宽度高度不固定的：

    <div class="container">
    <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
    <div style="clear:both"></div></div>  
    
     .container {
        width:500px;
        height:80px;
        margin-left:50px;
        padding-    top:10px;
        text-align:center;
    }
   
    .center {
        display:inline-block;
    }
   
      .center a {
        float:left;border:1px solid #fff;
        padding:5px 10px;
        margin:10px;
        text-decoration:none;
    }
   

5. 模拟表格

    .a {   
        height: 300px;   
        display: table;
    }   
    .b {   
        display:table-cell;
        vertical-align: middle;
    }     
   
    <div class="a">  
    <div class="b">content</div>  
    </div> 
   

howtocenterincss