第一种: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;
}
效果如下:
垂直居中效果都达到了,特意用了背景颜色,比较直观的看出垂直居中的不同;
哪种更适用,就自己选择吧