一、CSS左右布局：
-
结果如下图（flex）：
两栏 -
代码如下：
两栏代码
二、CSS左中右布局：
-
结果如下图（flex）：
三栏.png -
代码如下：
三栏代码
三、水平居中：
-
使用margin: 0 auto实现代码：
margin-0-auto -
使用 flex属性justify-content: center实现代码：
flex -
使用display: inline-block元素的属性text-align: center实现代码：
text-align.png
上面代码实现效果：
水平居中
四、垂直居中：
-
使用table标签自带属性实现代码：
垂直居中
运行效果 -
使用伪元素before、after实现代码：
伪元素实现
运行效果 -
使用 flex属性align-items: center实现代码：
flex
运行效果 -
使用 相对定位加负margin实现代码：
负margin1
运行效果 -
使用 相对定位加负margin：auto实现代码：
margin：auto
运行效果 -
使用 相对定位加 transform: translate实现代码：
translate
运行效果
声明：本博客教程版权归兰文聪和饥人谷所有，转载需说明来源！
