左右布局

最簡單的方法是左右浮動，父元素清除浮動

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}

左中右布局

與上面同理，可搭配margin或者定位來調(diào)整。（以后再補充好了）

水平居中。

1. 內(nèi)聯(lián)元素

text-align: center;

2.塊級元素

margin: 0 auto;

3.復(fù)數(shù)塊級元素
首先將塊級元素轉(zhuǎn)為內(nèi)聯(lián)元素，再用內(nèi)聯(lián)元素的方法居中

display: inline-block;
/*在父元素上*/
text-align: center;
/*修復(fù)bug*/
vertical-align: top;

垂直居中

垂直居中不像水平居中那么方便，因為在css高度取決于文檔流，而寬度又會改變文檔流。
當(dāng)知道父元素高度時

.parent{
  height: 100px;
}
.child{
  line-height:100px;
}

當(dāng)不知道父元素高度和子元素高度時

.parent{
  position: relative;
}
.child{
  position: absloute;
  top: 50%;
  transform: translateY(-50%);
}