一、CSS两栏布局
首先，假如HTML中有以下结构：
1.绝对定位
那么，想让他们呈现两栏布局，我们可以子元素设置绝对定位，而在他们父元素增加相对定位，示例代码如下：
2.浮动
- 让页面实现两栏布局，可以在需要两栏布局的元素的父元素上加一个clearfix的类，然后让所有子元素都float：left；就可以了，示例代码如下：
- 也可以触发第二个元素BFC，实现两栏布局，设置overflow:hidden;那么第二个元素可以不需要width，而自适应页面的宽度，示例代码如下：
二、CSS三栏布局（以下仅列出5种方法）
三栏布局，一般为两边固定，中间自适应的布局，效果图如下：
1.flex布局（2种）
- 简单实用，但不能兼容IE8及以下浏览器。
- 首先在父元素上设置flex，然后在子元素上设置属性
-
方法一：设置中间的盒子flex：1；即： flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，此时中间的盒子是可以随着页面的比例自适应的：
7.png -
方法二：设置两边盒子有宽度，可以缩小，中间的盒子可以在页面有剩余空间放大，并且由于mid元素在html结构中靠前，可以优先被加载出来，用order属性让他在页面中仍在第二个位置：
6.1.png
2.float布局
-
方法一：在需要三栏布局的元素的父元素上加一个clearfix的类，然后让所有子元素都float：left；就可以了：
float-1.png -
方法二：在第一个、第二个元素上分别设置左右浮动，再在第三个元素，也就是需要出现在第二个位置上的元素设置margin-left和margin-right，来实现三栏布局：
9.png
3.BFC布局
- 主要内容无法最先加载，当页面内容较多时会影响用户体验。
-
设置元素左右浮动，通过在元素上设置overflow：hidden，触发BFC特性，具有BFC特性的元素可以防止元素被浮动元素遮挡：
10.png
4.绝对定位布局
-
方法一：先确定中间的元素位置，设置中间的元素的左右margin分别为两边元素的宽度，然后给父元素设置position:relative;左右两个元素设置position:absolute，分别定位在页面左右两边：
11.png -
方法二：直接设置每个元素的绝对定位：
12.png
5.table的三栏布局
- 兼容性好，但不能设置栏间距，且一个单元格变大，两边单元格也都会变大；
-
设置三个元素为表格中的三个元素：
13.png
延伸：
- 除此之外还有grid布局，圣杯布局，双飞翼布局，就不一一枚举；
- 当元素高度未知时，BFC， flex和table布局会自适应，其他布局方式需要重新设置一些参数系数。
三、水平居中：
1.对于inline或者inline-block元素，可以直接设置父元素text-align：center;就可以了。
2.对于单个block元素，给定margin-left:auto;margin-right:auto;(这个block元素必须有width，浮动元素或且对定位无法使用这个方法)，子元素宽度不确定时，
a.可以设置margin-left和margin-right为定值。
b.在元素外加入table标签，所有的table标签都要写上，包括<tr><td>，然后将该元素写在<td>内，然后设置margin值为auto。
3.多个block元素，可以使用inline-block或者flex布局：
- 设置为inline-block：设置子元素display:inline-block;父元素text-align:center;
- 元素宽高未知：（
a.transform方法，
+1.png
flex布局：父元素设置display:flex; justify-content:center;
子元素要设置max-width。
（以上方法适用于子元素为浮动、绝对定位、内联元素均可水平居中）
4.居中浮动元素：
-
运用相对定位和margin：
+2.png
5.绝对定位元素：
-
依然是使用margin，方法和上面很相似（两种方法）：
+3.png
+4.png
四、垂直居中（七种方法）
- 前言：如果父元素的height不确定，那么只需要设置padding-top和padding-bottom为一样的值就可以了，但是如果确定了，就很难设置了，以下为常用的其中方法：
1.table自带功能
将文字放在table标签的td标签中就可以直接实现垂直居中了；
2.设置before和after类为100%的父元素高度;所有子元素设置inline-block;vertical-align: middle；也可以用伪类代替before和after类：
3.div伪装成table：
4.margin-top：-50%；
5.translate：-50%；（通用）
6.absolute margin auto6联合使用：
7.flex布局（通用）
9.
小技巧：
- CSS代码可以搜索关键词+generator搜索，搜到了就可以直接复制标准代码使用；
参考自：https://zhuanlan.zhihu.com/p/33522591?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240
https://jscode.me/t/topic/1936
https://zhuanlan.zhihu.com/p/43860155?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240
https://zhuanlan.zhihu.com/p/25068655
