CSS 常见布局问题总结

左右布局

最简单的方法是左右浮动，父元素清除浮动

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

左中右布局

与上面同理，可搭配margin或者定位来调整。（以后再补充好了）

水平居中。

1. 内联元素

text-align: center;

2.块级元素

margin: 0 auto;

3.复数块级元素
首先将块级元素转为内联元素，再用内联元素的方法居中

display: inline-block;
/*在父元素上*/
text-align: center;
/*修复bug*/
vertical-align: top;

垂直居中

垂直居中不像水平居中那么方便，因为在css高度取决于文档流，而宽度又会改变文档流。
当知道父元素高度时

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

当不知道父元素高度和子元素高度时

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