CSS实现三栏布局和垂直居中

网上找的方法，自己整理一下~（这些面试也会考）

#三栏

绝对布局

<div id = "left">我是左边</div>  
<div id = "right">我是右边</div>  
<div id = "center">我是中间</div> 

html,body{ 
 margin: 0px;
 width: 100%; 
}  

#left,#right{
 width: 200px;
 height: 200px; 
 background-color: #ffe6b8;
 position: absolute;
}  
#left{
 left:0px;
}  
#right{
 right: 0px;
}  
#center{
 margin:2px 210px ;
 background-color: #eee;
 height: 200px; 
}  

浮动（中间的要放在最后）

        
 <div id = "left">我是左边</div>  
 <div id = "right">我是右边</div>  
 <div id = "center">我是中间</div> 

html,body{ 
 margin: 0px;
 width: 100%; 
}  

#left,#right{
 width: 200px;
 height: 200px;
 background-color: #ffe6b8;
}  
#left{
 float: left;
}  
#right{
 float: right;
}  
#center{
 margin: 0 210px;
 height: 200px; 
 background-color: #a0b3d6
}  

margin负值法（布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。）

 <div id = "wrap">  
     <div id = "center"></div>  
 </div>  
 <div id = "left_margin"></div>  
 <div id = "right_margin"></div>  

html,body{ 
 margin: 0px;
 width: 100%; 
}  

#wrap{ 
 height: 100px;
 background-color: #fff;
 float: left;
}  

#wrap #center{
 margin:0 210px;
 height: 100px;
 background-color: #ffe6b8; 
} 
 
#left_margin,#right_margin{
 float: left;
 width: 200px;
 height: 100px;
 background-color: darkorange；
}
  
#left_margin {
 margin-left: -100%;
 background-color:lightpink;
}  

#right_margin{
 margin-left:-200px;
} 

flex

<div id = "box">  
  <div id = "left_box"></div>  
  <div id = "center_box"></div>  
  <div id = "right_box"></div>  
</div> 

html,body{ 
 margin: 0px;
 width: 100%; 
}  

#box{
 display: flex;
 height: 200px;
 margin: 10px;
}  
#left_box,#right_box{
 width: 200px;
 height: 200px;
 margin: 10px;
 background-color:lightpink;
}  

#center_box{
 flex:1;
 height: 200px;
 margin: 10px;
 background-color:lightgreen;
}  

#垂直居中

css2：

    <div class="parentNode">
        <div class="childNode"></div>
    </div>

   .parentNode {
     width: 400px;
     height: 400px;
     background: #f00;
     overflow: hidden;  
     margin: auto;      
     position: absolute;  
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 

 }

css3: ( flex )  ( 父元素设置为 absolute 和 flex还有另外两个属性需要设置，分别是justify-content和align-items，他们的意思分别是水平居中和垂直居中 )

    <div class="parentNode">
        <div class="childNode"></div>
    </div>
    
    * {
          margin: 0;
          padding: 0;
      }
    .parentNode {
          width: 400px;
          height: 400px;
          background: #f00;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          top:0;
          bottom:0;
          left:0;
          right:0;
          margin:auto;
     }
   .childNode {
         width: 200px;
         height: 200px;
         background: #fff;
    }

css3: (transforrm)

<div class="parentNode">  
    <div class="childNode"></div>  
</div>  

    .parentNode {  
       width: 400px;  
       height: 400px;  
       background: #f00;   
       position: absolute;    
       left: 50%;  
       top: 50%;  
       transform: translate(-50%, -50%);  
     } 

首先定义为绝对定位

 top: 50%;left: 50%; 是以父元素（positon不为static）的左上角为原点，将元素分别向右和向下移动父元素的宽和高的50%距离
 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

tips:

flex实现流式布局

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

      *{ 
	   margin: 0;
	   padding:0;
        }
	  
    .container{
        margin: 20px 20px;
        padding: 10px 10px;
        display: flex;
        flex-wrap:wrap;
        border: 1px solid #ADAAAA;
      }
	  
      .item{
        flex:0 0 40%;
        height: 100px;
        margin:20px 5%;
        box-sizing: border-box;
        border: 1px solid red;
      }

    @media (min-width:960px){
     .item{
        flex:0 0 20%;
        height: 100px;
        margin:20px 2.5%;
        box-sizing: border-box;
        border: 1px solid red;
      }
     }