水平垂直居中的问题 （四种方法）
方法一 ：position布局，position设为absolute 给定高度，通过绝对定位方式居中 width: x;height: y;position: absolute; left: 50%;top: 50%;margin-left: -(x/2);margin-top: -(y/2); <div class="contain"> </div> <style type="text/css"> *{margin: 0;padding: 0;} html,body{width: 100%; height: 100%;} .contain { width: 500px; height: 500px; background: silver; position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; } </style> 方法二 ：display：table 父级元素：{ display:table;} 子级元素： { display:table-cell;vertical-align:middle } 代码： <div class="wapper"> <div class="content">2222</div> </div> <style type="text/css"> *{margin: 0;padding: 0;} html,body { width: 100%;height: 100%; } .wapper{ width: 100%; height: 100%; display:table; } .content{ display:table-cell; vertical-align:middle; background: silver;} </style> 方法三 ：flex布局 父级元素：{ display:flex;flex-direction:row;justify-content:center;align-items:center;} 子级元素：{flex:1} 代码： <div class="contain"> <div class="box">我是中间的div1</div> </div> <style> *{margin:0;padding:0; } body,html {width: 100%;height: 100%;} .contain{ width:100%; height:100%; margin:0 auto; background: yellow; display:flex; flex-direction:row; justify-content:center; align-items:center;} .box{ width:500px; height: 300px; line-height: 300px; text-align: center; font-size: 16px; color#fff; background-color: #f00; margin:0 auto;} </style> 方法四 ：transform 位移布局 父级元素：{ position: relative;} 子级元素：{ position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);} 代码： <div class="contain"> <div class="box">我是中间的div1</div> </div> <style type="text/css"> * {margin: 0;padding: 0;} html,body { width: 100%; height: 100%; } .contain{ width:100%; height:100%; position: relative; background: yellow; } .box { width: 500px; height: 300px; line-height: 300px; text-align:center; font-size: 16px; color: #fff; background: orange; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); } </style> 两栏布局: 左边固定,右边自动 效果图： 方法一：浮动 <div class="left" >左侧</div> <div class="right" >右侧</div> <style type="text/css"> .left { width: 200px; height: 200px; float: left; background: yellow;} .right { margin-left: 200px; height: 200px; background: orange;} </style> 方法二：flex 弹性布局 <div class="main"> <div class="left"></div> <div class="right"></div> </div> <style type="text/css"> .main {width: 100%;height: 200px;display: flex;} .left {width: 200px;height: 200px;background: gray;flex: none;} .right {height: 100%;background: green;flex: 1; } </style> 方法三：table方法 <div class="main"> <div class="left"></div> <div class="right"></div> </div> <style type="text/css"> *{ margin: 0;padding: 0; } .main { width: 100%; height: 200px; display: table} .left { width: 200px; height: 200px; display: table-cell;background: yellow;} .right { height: 100%; display: table-cell; background: orange; } </style> 方法四： css计算宽度calc <div class="main"> <div class="left"></div> <div class="right"></div> </div> <style type="text/css"> *{ margin: 0;padding: 0; } .main { width: 100%; height: 200px; display: table} .left { width: 200px; height: 100%; background: yellow; float: left} .right { height: 100%; background: orange; float: right;width:calc(100% - 200px); } </style> 两栏布局: 左右固定 <div class="left">123</div> <div class="right">234</div> <style type="text/css"> .left {width: 200px; height: 200px; background: pink; position: absolute; left: 0; } .right { width: 200px; height: 200px; background: red; position: absolute; right: 0; } </style> 三栏布局: <div class="main"> <div class="left"></div> <div class="right"></div> </div> <style type="text/css"> .main{ width: 1200px; height: 40px; margin: 0 auto; background-color: red; position: relative; } .left,.right{ position: absolute; height: 400px; width: 50px ;} .left{ left: -50px; background-color: #00bafa} .right{ right: -50px; background-color: #000} </style>