垂直居中

html

1 2 3

<div id="parent"> <div id="child">Content here</div> </div>

css

方法1：

1 2 3 4 5

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

方法2：(此方法在iE8及以下无效)

#parent { position:relative;} #child { 　　position:absoulte; left:50%; top:50%; transform: translate(-50%,-50%); }