未知宽高元素水平垂直居中的4种方法

.box{
overflow: hidden;
width: 100%;
display:flex;/设为伸缩容器/
display: -webkit-flex;
flex-flow:row;
}
.box .left{
-webkit-flex: 0 0 180px;
-ms-flex: 0 0 180px;
flex:0 0 180px;
}
.box .right{
-webkit-flex: 1;
-ms-flex: 1;
flex:1;
min-width:0;
}
特别要注意这个min-width:0，这个是为了解决元素会被里面的内容撑开的问题，而且兼容火狐浏览器。