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
  
  
  

  运行效果

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