一.水平居中

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

子元素为

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

注意:内联元素 ,块级元素和行内块元素的区别:

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

二.垂直居中

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

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height

.parent{
  height: 50px;
  line-height: 50px;
}

父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;

.parent{
  height: 100px;
  display: table-cell;
  vertical-align:middle;
}

块状元素:设置子元素position:absolute 并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。

注意:
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

一个问题:
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙,怎么解决?

给img vertical-align:middle | top等等。让图片不要和基线对齐
给img vertical-align:middle | top等等。让图片不要和基线对齐

.parent{
  border: 1px solid red;
}
img{
  /* vertical-align: bottom; */
  display: block;
}

三.css布局

单列布局

1.上中下等宽布局


    头部
    内容
    尾部

body{margin: 0;}
    #container{
         height: 100%;
        /*   width: 960px; */
        /*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
        max-width: 960px;
        margin: 0 auto;
    }   
    
    #header{
        height: 20%;
        background-color: red;
    }
    #footer{
        height: 20%;
        background-color: yellow;
    }
    #content{
        height: 60%;
        background-color: green;
    }

2.上下浏览器宽度,中间内容宽度

#container{
    height: 100%;
}
#header{
    background-color: yellow;
    height: 20%;
}
#content{
    background-color: green;
    height: 60%;
}
#footer{
    background-color: red;
    height: 20%;
}
.layout{
    /*width: 960px;*/
    max-width: 960px;/*当浏览器宽度小于960px时,效果与第一种方法相同*/
    margin: 0 auto;
}

二三列布局

1.float+margin

div{height: 100%;}
    #left{
        width: 100px;
        float: left;
        background-color: red;
    }
    #right{
        width: 100px;
        float: right;
        background-color: yellow;
    }
    #content{
        margin: 0 100px;/* 或者换成overflow: hidden; 触发了BFC使重新计算宽度，就不需要写margin了*/
        background-color: green;
    }

DOM顺序固定！
效果：（缺点：先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列，渲染时先渲染了侧边栏，而不是比较重要的主面板.。）

2.绝对定位法

div{height: 100%;}
#left,#right{
        position: absolute;
        top: 0;
        width: 100px;
    }
    #left{
        left: 0;
        background-color: red;
    }
    #right{
        right: 0;
        background-color: yellow;
    }
    #content{
        margin: 0 100px;/* overflow: hidden; */
        background-color: green;
    }

DOM顺序可以随意调整！
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

3.margin负值法（圣杯布局）

.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;  
 }
#container {        
    padding: 0 230px 0 190px;   
 }

DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。

4.margin负值法（双飞翼法）


      #main

.main-wrap {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
 }
.main {    
    margin: 0 230px 0 190px;
}

主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。

css布局问题