居中单列多列双飞翼圣杯

参考文档：
https://segmentfault.com/a/1190000008789039
https://www.cnblogs.com/woodk/p/5147085.html

居中

水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：

行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。
对于宽高不定，使用transform:translateX(-50%)这种来进行反向居中校正。

单列/多列

单列

两种情况：

前者父元素{
margin:0 auto;
max-width:xxpx;
}
后者content部分设置同上即可。header和footer宽度设为100%。

两列/三列

前者：侧栏定宽，主栏自适应
后者：两侧侧栏定宽，中间栏自适应
1、float+margin
左右两侧定宽&float：left、right，中间栏margin-left\right为左右两栏的宽度。

<div id="content">
    <div class="left">sub</div>
    <div class="right">extra</div>
    <div class="main">main</div>
</div> //注意先写两侧栏再写中间栏,否则侧栏会被挤到下一列

2、absolute+margin
左右两侧absolute定位定宽，中间margin:0 xxpx;
html标签顺序书写。注意，若中间栏有最小宽度限制，会出现侧边栏和中间栏重叠。（因为绝对定位了）

圣杯布局

float+负margin+padding+relative,main部分可设置最小宽度以防缩放混乱。
缺点：main最小宽度不能小于左侧栏

 <div id="bd">         
    <div class="main"></div>        
    <div class="left"></div>        
    <div class="right"></div>  
</div> 
<style>
.main {        
    float: left;       
    width: 100%;   
 }  
 .left {       
    float: left;        
    width: 190px;        
    margin-left: -100%;               
    position: relative;  
    left: -190px;  
}   
.right {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
    position: relative; 
    right: -230px;  
 }
#bd {        
    padding: 0 230px 0 190px;   
 }
 </style>

双飞翼布局

float+负margin+margin

<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="left"></div>        
<div class="right"></div>
<style>
#main-wrap {        
    float: left;       
    width: 100%; 
 }  
 .left {       
    float: left;        
    width: 190px;        
    margin-left: -100%;
    height:400px; 
}   
.right {        
    float: left;        
    width: 230px;       
    height:400px; 
    margin-left: -230px; 
 }
#main {    
    margin: 0 230px 0 190px;
}
</style>

因为main外面套了一个div，故其margin变化不影响侧栏。省掉了圣杯布局中对侧栏进行relative设置。

flex布局 grid布局

flex无法同时满足水平和垂直两个维度的布局。