这8张脑图几乎概括了所有的布局方案，确定不看看吗？

Hi~，我是一碗周，如果写的文章有幸可以得到你的青睐，万分有幸~

🍏 写在前面

前端布局不管是在面试过程中还是在工作中都是非常重要的一部分，一个优秀的前端工程师可以在很快的时间内写出同一种布局的多种实现方案，练习并掌握CSS布局方案可以提高我们的页面开发速度。

这篇文章通过思维导图的方式总结了八大类前端布局，每一类最少都包含3个实现方法，由于是脑图，并不能展示过多的代码且没有代码高亮（这点很不友好），不过我尽可能多的在脑图中展示了核心CSS代码，方便参考。

八大类布局如下图：

文本包含的图片数据大于10M，流量用户请选择性阅读

🍑 水平居中

水平居中的实现非常简单，也是最常用的，这里列举了7方式如下图：

🍒 垂直居中

垂直居中的使用率几乎与水平居中差不多，实现也是非常的简单，这里总结了6种常用方式

🍓 水平垂直居中

实现水平垂直居中，只需要将前面的方式进行结合，这里总结了7种方式。

🫐 两列布局

所谓的两列布局就是一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。最终效果如下所示：

这里总结了实现两列布局的6种方式

🍈 三列布局

三列布局主要分为两种：

• 第一种是前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列布局实现。
• 第二种是前后两列定宽，中间自适应，最终效果图如下

这里总结了实现两列布局的5种方式

🍊 等分布局

等分布局就是将一个容器平均分成几等份，这里以 4 等分为例，总结了4种实现方式。

🍉 Sticky Footer布局

Sticky Footer布局是页面内容不够长时，底部栏就会固定到浏览器的底部；如果足够长时，底部栏就后跟随在内容的后面。如下图所示：

这里总结了4种实现方式

🍋 全屏布局

全部布局主要应用在后台，主要效果如下所示：

这里总结了3种实现方式

🥭 写在最后

本篇文章到这里就结束了，如果觉着这篇文章对你有所帮助，可以点赞支持一下~

可以将文中的图片直接保存到本地使用，如果你需要原图片或者思维导图源文件可以找我要。