用CSS实现几种常见布局

左右布局

左右布局只要使左边的块级元素向左浮动，右边的向右浮动即可。但要记得因为子元素浮动会造成父元素的高度坍塌，所以需要在父元素上使用.clearfix:after清除浮动。

左右1.jpg

左右2.jpg

左中右布局

左中右布局比左右布局多了中间一个元素，那么就只能全部向左浮动了。这里为了演示令三个元素拥有同样的宽度，实际使用需要根据内容添加margin。同样需要为父元素清除浮动。

左中右1.jpg

左中右2.jpg

水平居中

• 内联元素
  要使内联元素居中，为父元素添加text-align:center即可。
  

  水平居中-内联.jpg

• 块级元素

1. 不固定宽度
   要使不固定宽度的块级元素居中，需要为父元素添加左右相等的padding。
   

   水平居中-块级-不固定宽.jpg

2. 固定宽度
   要使固定宽度的块级元素居中，让这个元素自动计算水平方向的margin的值即可，左右margin值会相等。
   

   水平居中-块级-固定宽.jpg

垂直居中

• 内联元素
  要使内联元素垂直居中，需要为父元素添加上下相等的padding。
  
  垂直居中-内联.jpg

• 块级元素
  块级元素的垂直居中复杂一些，需要使用绝对定位，使它自己的顶部距离父元素顶部50%的距离，再使用tranform: translateY(-50%)使它自己向上缩进自身高度的50%以实现视觉上的居中。
  
  垂直居中-块级.jpg