div居中
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
1,float属性
最普遍的方式。
2,绝对定位
.main{
position:absolute;
}
.left{
left:0;
width:300px;
}
.center{
left:300px;
right:300px;
}
.right{
right:0;
width:300px;}
需要脱离文档流,使用性较差,但是便捷
3,felx
.main{
display:flex;
}
.left{
width:300px;
}
.center{
flex:1;
}
.right{
width:300px;}
不兼容ie8及以下
3,表格布局
.main{
display:table;
width:100%;
}
.left{
display:table-cell;
width:300px;
}
.center{
display:table-cell;
}
.right{
display:table-cell;
width:300px;}
兼容ie8 ,但是高度超出布局会错乱
4,网格布局
.main{
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-colums:300px auto 300px;
}
新技术,代码更加简化