摘要：例一個高的，里面的文字垂直居中使該元素變大倍動畫過渡效果

左右布局

一欄定寬，一欄自適應

    
    
定寬
    
自適應
    
    .left{
      width: 200px;
      height: 600px;
      float: left;
      display: table;
      text-align: center;
      line-height: 600px;
    }
    .right{
      margin-left: 210px;
      height: 600px;
      background: yellow;
      text-align: center;
      line-height: 600px;
    }

利用絕對定位實現

    
    

    
    

    
    
    .left{
        position:absolute;
        left:0;
        width:200px;
    }
    .right{
        margin-left:200px;
    }

左中右布局

利用絕對定位實現

    
    

    
    

    
    

    
    
    .left{
      width:200px;
      background-color:yellow;
      position:absolute;
      top:0;
      left:0;
    }
    .main{
      margin-left:200px;
      margin-right:300px;
    }
    .right{
      width:300px;
      background-color:orange;
      position:absolute;
      top:0;
      right:0;
    }

利用浮動定位實現

    
    

    

    

    
    .left{
      width:300px;
      background-color:yellow;
      float:left;
    }
    .right{
      width:200px;
      background-color:orange;
      float:right;
    }
    .main{
      margin-left:300px;
      margin-right:200px;
}

圣杯布局，兩邊定寬，中間自適應

    
    

        
Main
        
Left
        
Right
    
    
        .col{
            float: left;   
            position:relative;
        }
        .container{
            padding:0 200px 0 100px;
        }
        .left{
            left:-100px;
            width: 100px;
            height:100%;
            margin-left: -100%;
            background: red;
        }
        .main{
            width:100%;
            height: 100%;
        }
        .right{
            right:-200px;
            width:200px;
            height:100%;
            margin-left: -200px;
            background: yellow;
        }

雙飛翼布局

    
     
 
        
Left
        

            
Main
        
        
Right
    
    
     .col{ 
            float: left;
        }
        .main{ 
            width:100%;
            height:100%;
        }
        .main_inner{
            margin:0 200px 0 100px;
        }
        .left{
            width: 100px;
            height: 100%;
            margin-left: -100%;
            background: red;
        }
        .right{
            height:100%;
            width:200px;
            margin-left: -200px;
            background: yellow;
        }

水平居中

對于行內元素(inline)：text-align: center;

    
    

       kaka
    
    
    div {
        text-align:center
    }

對于塊級元素(block)：
1.給此塊級元素設置寬度
2.margin:0 auto;

    
    

        
kaka
    
    
    .parent {
        width:1002px;
    }
    .child {
        width:50%;//也可以是固定像素
        margin:0 auto;
    }

垂直居中

行高與高度一致使其居中，適用于只有一行文字的情況

    
    

        
kaka
    
    
    .parent {
        height:1002px;
        line-height:1002px;
    }

父元素高度不寫（推薦寫法）

    
    

        
kaka
    
    
    .parent {
        padding:10px 0;
    }

水平垂直均居中

已知寬高，給負margin

    
    

        
kaka
    
    
    .parent {
        position: relative;
    }
    .child {
      position: absolute;
      width:1002px;
      height:828px;
      top: 50%;
      left: 50%;
      margin-top:-414px;
      margin-left:-501px;
    }

未知寬高，transform方案

    
    

        
kaka
    
    
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

flex布局

    
    

        
kaka
    
    
    .parent {
      display: flex;
      justify-content:center;//子元素水平居中
      align-items:center;//子元素垂直居中
    }

請寫出「姓名」與「聯系方式」兩端對齊的例子

姓名
聯系方式

span{
    line-height:20px;
    font-size:20px;
    height:20px;
    overflow:hidden;
}
span::after{
    content: "";
    display: inline-block;
    width: 100%;
}

文本內容過長如何變成省略號？
1 一行文本過長,只需要對該div作以下操作：

div{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

2 多行文本超出,如：在第二行后省略：

div{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

如何使固定高度的div里面的文字垂直居中？

1.先確定行高 2.再用padding補全高度。這種寫法的好處是在文字增減過程中不會出現bug。
例：一個高 40px 的 div，里面的文字垂直居中

div{
    line-height:20px;
    padding:10px 0;
}

使該元素變大1.2倍

    transform: scale(1.2);

動畫過渡效果

    transition: all 0.3s;