总结几种实现左边宽度固定，右边宽度自适应的方法

第一种：display:table-cell的应用

html代码

css代码：

.wrapper{
    width:100%;
    display:table;
}
.left{
    width:200px;
    display:table-cell;
    background:red;/*为了下边明显看出效果*/
}
.right{
    background:yellow;/*为了下边明显看出效果*/
}

效果：

为了明显看出效果，我添加了背景色
注意点：左边高度会随着右边高度变化；

第二种：display:flex;

html代码不变
css代码如下：

.wrapper{/*父元素*/
	width:100%;
   	display:flex;
}
.left{
   	width:200px;
   	background:green;
}
.right{
   	background:blue;
   	flex:1;
}

效果：

注意点：左边高度会随着右边高度变化；

那么，问题来了，俩种方法分别怎么实现左边部分垂直居中？

1、display:table-cell

在左边容器 .left 加上vertical-align: middle;

.left{
	width:200px;
    display:table-cell;
    background:red;
    vertical-align: middle;
}

效果如下：

2、display:flex

在父元素.wrapper加上align-items: center;属性

.wrapper{
	width:100%;
    display:flex;
    align-items: center;
}

效果如下：

垂直居中效果都达到了，特意用了背景颜色，比较直观的看出垂直居中的不同；

哪种更适用，就自己选择吧