前端开发基础：这些网页布局方法你都知道吗？

最近很多小伙伴在学习基础布局的时候很纠结布局方法，那么就要就来给大家总结几个常用的页面架构布局方案，看完可以随收收藏起来，以后都能用到

今天讲解的布局大致可以分成两种布局，分别是居中布局和多列布局。这两种布局又有好几种小布局方案，一起来看看吧！
居中布局
a.水平居中
b.垂直居中
c.水平垂直
多列布局
a.自适应布局
b.等宽布局
c.等高布局

居中布局
HTML代码

水平居中
在水平居中里，可以用5种布局方案。

1. inline-block + text-align
   
2. table + margin
   
3. absolute + transform
   
4. flex + justify-content/margin
   
   5.flex + margin
   
   垂直居中
   在水平居中里，可以用5种布局方案。
5. table-cell + vertical-align
   
6. absolute + transform
   
7. flex + align-items
   
   水平垂直居中
   1.inline-block + text-align + table-cell + vertical-algin
   
   2.absolute + transform
   
8. flex + justify-content + align-items
   
   多列布局
   自适应布局
   1. 定宽 + 自适应
9. float + margin
   
10. float + overflow BFC
    
    3.table
    
11. flex
    
12. 三列: 两列定宽 + 一列自适应
    
    2. 不定宽 + 自适应
    1.float + overflow:hidden BFC
    
13. table
    
    3.flex
    
    4.三列
    
    等宽布局
    1.float
    
14. table
    
    3.flex
    
    等高布局