左右布局

• 在子元素中样式中加上float：left，在父元素的class中加上claerfix。clearfix的作用是消除浮动bug。

  
  
  image.png

左中右布局

• 左中右布局可以用两边用绝对定位的方式在设计。

  
  
  image.png

水平居中

• 行内元素的居中用text-align：center

  
  
  image.png

• 块级元素的居中
  在子元素样式中加入margin:0 auto;

  
  
  image.png

垂直居中

• 用绝对定位和负外边距的方法对块级元素进行绝对定位

  
  
  image.png

• 用line-height：（与父级元素高度相等）对行内文字进行居中

image.png