一.定宽：
1.定位居中(absolute)
方法一：
html: <div class="main"></main> css: .main{ 400px; height:200px; background:#eee; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px; }
方法二：
html: <div class="main"></div> css: body { height: 100%; } .main{ 400px; height: 200px; background:#eee; position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
二.非定宽：
1.定位居中(absolute+translate)
html: <div class="main"> hello world </div> css: .main{ background:#eee; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
2.flex布局
html: <body> <div class="main"> </div> </body> css: html,body{ 100%; height: 100%; display: -webkit-flex; display: flex; justify-content:center; align-items:center; } .container{ 400px; height: 200px; background: #ccc; }
3.table
html: <body> <div class="container"> <div class="main"> <div class="inner"></div> </div> </div> </body> css: html,body{ height: 100%; } .container{ 100%; height:100%; display: table; } .main { display: table-cell; vertical-align: middle; } .inner{ 400px; height: 200px; background: #ccc; margin:0 auto; }