项目中，我使用的flex布局居多，直接上代码。
定宽：
定位居中(absolute)
html:
<div class="main"></main>css:
.main{
width: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{
width: 400px;
height: 200px;
background:#eee;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}非定宽：
定位居中(absolute+translate)
html:
<div class="main">
hello world
</div>css:
.main{
background:#eee;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}flex布局
html:
<body>
<div class="main">
</div>
</body>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:
<body>
<div class="container">
<div class="main">
<div class="inner"></div>
</div>
</div>
</body>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;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。