回顾CSS布局易混淆的概念

一、浮动模型

元素默认是static的，不能浮动，但可以用CSS样式设置为浮动

浮动模型只有两个值 float:left 和 float:right ，可以让块状元素同行显示

 

二、层模型

top/bottom/left/right是层模型的值，即是绝对定位、相对定位和固定定位的值

<!--不要和浮动模型搞混了，这四个值不要用到float上去了-->

 

三、相对定位

相对于以前的位置进行定位/移动

 

四、绝对定位

相对于其最接近的含有定位属性的父包含块进行移动

元素的默认定位属性是static，是静止的，不属于含有定位属性

具有定位属性是指要给元素设置除position:static外的其他定位属性，如绝对、相对、固定定位等

 

五、绝对定位和相对定位的组合使用

作用：实现元素相对于前辈元素移动

方法：

1. 前辈元素加入相对定位 position:relative

2. 后辈元素加入绝对定位 position:absolute ，然后用top/bottom/left/right实现相对于前辈元素的移动

 

六、水平居中

设置浮动和相对定位水平居中的原理是：

先让父元素float到最左端，然后为其设置相对定位，右移50%；再为子元素设置相对定位，相对父元素左移50%，最终实现居中

 

七、垂直居中

利用table自带的vertical-align:middle属性进行居中

方法1：给td或者table的高度设置具体的数值，可以看到垂直居中效果

方法2：给table的高度设置百分比

<!--给td的高度设置百分比，会按内容的高度显示，没有意义，看不到垂直居中效果-->

table的高会按父包含块的百分比显示，可以看到居中效果

<!--没有父包含块也看不到居中效果-->

问：如何让table基于浏览器窗口垂直居中？

答：可以给table设置定位，让其变成图层，设置height:100%  <!--就是让table的高和父元素一样长-->

1. 设置绝对定位absolute，table的高会有变化，如果有含有定位属性的父包含块，基于父包含块垂直居中；如果没有父包含块，基于浏览器窗口垂直居中

2. 设置相对定位relative，table的高无变化，相对定位本身是相对于自己定位，所以若不是用来移动，没有什么用

3. 设置固定定位fixed，table的高有变化，固定定位是相对于浏览器窗口而言的，所以高会按浏览器窗口的100%显示，可以实现基于浏览器窗口垂直居中

总结：要想利用table的垂直居中属性，得给table一定的高度，才能看到垂直居中效果