4 methods for horizontal and vertical centering of unknown width and height elements

.box{
overflow: hidden;
width: 100%;
display:flex;/ make a flex container /
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;
}
Pay special attention to this min-width: 0, this is to solve the problem that the element will be stretched by the content inside, and it is compatible with Firefox browser.