css常见布局问题

1.如何实现一个盒子在页面中上下左右居中

方法一：（盒子宽高固定时）

.box{
width:400px;
height:200px;
background:#000;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}

偏移量也可使用transform属性的translate来实现。

方法二：

.box{
margin:auto;
position:absolute;
left:0;
right:0;
bottom:0;
top:0; 
}

2.左侧固定，如何使右侧自适应

方法一：

.block_left{float:left;width:300px;height:400px;background:#f00;}
.block_right{margin-left:300px;height:400px;background:#000;}

方法二：

.block_left{float:left;width:300px;height:400px;background:#f00;}
.block_right{overflow:hidden;height:400px;background:#000;}

方法三：

.block_left{position:absolute;width:300px;height:400px;background:#f00;}
.block_right{margin-left:300px;height:400px;background:#000;}

方法四：

左右两部分同时固定定位，但是测试发现这样会出现横向滚动条，后续会继续补充。

3.左右宽度固定，中间自适应

       方法一：

.left{float:left;width:200px;height:100px;background:#f00;}

.middle{margin-right:200px;margin-left:200px;height:100px;background:#ccc;}

.right{width:200px;float:right;height:100px;background:#00f;}

div布局为左右中

方法二：

.wrap{width:100%;margin:0 auto;display:flex;}
       .left{flex:0 0 200px;background:#ccc;}
       .middle{flex:1 1 auto;background:#333;}
       .right{flex:0 0 200px;background:#ccc;}