左右布局
最简单的方法是左右浮动,父元素清除浮动
.clearfix:after{
content: '';
display: block;
clear: both;
}
左中右布局
与上面同理,可搭配margin或者定位来调整。(以后再补充好了)
水平居中。
- 内联元素
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%);
}