实现两栏布局、三栏布局和水平垂直居中

本文采用简写方式，适合记忆力差，理解了又忘记的友友 方便记忆面试中高频的题目，暂时就记住这么多，后续会持续更新。

两栏布局：

1. .left{width:200px;float:left;}.right{overflow:hiddle}
2. .left{width:200px;float:left;} .right{calc(100% - 200px);float:left}
3. .parent{display:flex} .left{width:100px} .right{flex:1}
4. .parent{position:relative} .left{width:100px;left:0;position:absolute} .right{position:absolute;width:100%;margin-left:100px}

三栏布局：

1. .parent{display:flex} .left{width:100px} .center{flex:1}.right{width:100px}
2. .parent{position:relative} .left{width:100px;float:left} .center{margin-left:100px;margin-right:100px} .right{width:100px;float:right}

水平垂直居中布局

1. .parent{width:500px;height:500px;display:flex;justify-content:center;align-items:center} .box{width:50px;height:50px}
2. .parent{width:500px;height:500px;position:relative;} .box{width:50px;height:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}