1.水平居中

行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可,下面主要介绍下容器内的垂直居中和完全居中

2.line-height

单行文本垂直居中

1
2
3
<div id="parent">
  <div id="child">Text here</div>
</div>
1
2
3
4
#child {
  line-height: 200px;
  text-align:center;
}

图片垂直居中:

1
2
3
<div id="parent">
  <img src="">
</div>
1
2
3
4
5
6
#parent {
  line-height: 200px;
}
#parent img {
  vertical-align: middle;
}

3.table & table-cell

通用方法(vertical-align只对行内元素或者行内快起效,table-cell默认为行内块)

1
2
3
<div id="parent">
  <div id="child">Content here</div>
</div>
1
2
3
4
5
#parent {display: table;}
#child {
  display: table-cell;
  vertical-align: middle;
}

4.absolute-position & negative-margin

1
2
3
<div id="parent">
  <div id="child">Content here</div>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#parent{
	width:600px;
	height:200px;
	position:relative;
}
#child{
	width:300px;
	height:100px;
	left:50%;
	top:50%;
	margin-left: -150px;/*负的元素宽度的一半*/
	margin-top: -50px;/*负的元素高度的一半*/
	position:absolute;
}

5.absolute-position & margin-auto

实现的效果和上面的相同,这种在做响应式中用起来比较方便(此特性只支持IE8+)

1
2
3
<div id="parent">
  <div id="child">Content here</div>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#parent {
  position: relative;
  width:600px;
  height:200px;
}
 
#child {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}