html 布局小技巧

1:水平居中

1-1使用inline-block 和 text-align实现

    .parent{text-align: center;}
.child{display: inline-block;}

1-2使用margin:0 auto来实现（需要指定长度）

.child{width: 200px; margin: 0 auto;}

1-3 使用table实现

.child{display: table; margin: 0 auto;}

1-4 使用绝对布局实现

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute; left:50%; transform:translate(-50%);}

1-5 使用flex 实现

.parent{display:flex;}
.child{margin:0 auto;}

2:垂直居中

2-1 使用vertical-align

/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

2-2实用绝对定位

.parent{display:flex; align-items:center;}

3：水平垂直全部居中

3-1 利用vertical-align,text-align,inline-block实现

.parent{display:table-cell; vertical-align:middle; text-align:center;}
.child{display:inline-block;}

3-2 利用绝对定位实现

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

3-3 利用flex实现

.parent{display:flex;justify-content:center;align-items:center;}

4：多列布局

4-1 左列定宽，右列自适应

4-1-1 利用float+margin实现

.left{float:left;width:100px;}
.right{margin-left:100px;}

4-1-2 使用float+overflow实现

.left{width:100px;float:left;}
.right{overflow:hidden;}

4-1-3实用flex实现

.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}

4-2 右列定宽，左列自适应
4-2-1 flex 实现

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}

4-2-2 float +margin 实现

.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}

。。。。。

具体参考 https://segmentfault.com/a/1190000003931851