html 块状元素垂直居中,css布局：块级元素垂直居中

项目中，我使用的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;

}