css布局

一、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
  运行效果

　　　　　　　　声明：本博客教程版权归兰文聪和饥人谷所有，转载需说明来源！