项目中，我使用的flex布局居多，直接上代码。

定宽：

定位居中(absolute)

html:

css:

.main{  width:400px;  height:200px;  background:#eee;  position:absolute;  left:50%;  top:50%;  margin-left:-200px;  margin-top:-100px;}

html:

css:

body {    height: 100%;}.main{ width: 400px;   height: 200px;   background:#eee;  position:absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  margin: auto;}

非定宽：

定位居中(absolute+translate)

html:

    
         hello world
    

css:

.main{  background:#eee;  position:absolute;  left:50%;  top:50%;  transform: translate(-50%,-50%);}

flex布局

html:

css:

html,body{    width: 100%;    height: 100%;    display: -webkit-flex;    display: flex;    justify-content:center;    align-items:center;}.container{    width: 400px;    height: 200px;    background: #ccc;}

table

html:

css:

html,body{     height: 100%;}.container{    width:100%;    height:100%;            display: table;}.main {    display: table-cell;    vertical-align: middle;}.inner{    width: 400px;    height: 200px;    background: #ccc;    margin:0 auto;}