CSS实现元素水平/垂直居中的方法

首先，我们来了解水平居中,它有很多种方法，我们暂时先来了解其中的几种：

1.    在实现方案中，我们最熟悉的莫过于给元素定义一个宽度，然后使用margin：

1 2 3 4

body{     width:960px;     margin:0 auto; }

这个是当我们的定义元素的宽度时显现的，如果我们不能定义宽度时，该怎么办呢？

2.    我们对于定位也是常用的，在这里当然也可以采用定位的方法来实现：

1 2 3 4

body{     position:absolute;     left:50%; }

3.   既然定位可以，那浮动也是可以的：

1 2 3 4

body{     float:left;     right:50%; }

4.    对于几个元素同时居中在一条线上：

?

1 2 3

body{    vertical-align:middle;  }

5.    利用table:

1 2 3 4 5 6

ul{     display:table; } ul li{     display:table-cell; }

6.    还可以使用inline-block来实现，但要使用这个就得在其父元素上设置text-align.如下：

1 2 3 4 5 6

body{     text-align:center; } .content{     display:inline-block; }

实现垂直居中的四种方法：

1.    只能是单行文本居中（可适用于所有浏览器）：

1 2 3 4

.content{    height:100px;    line-height:100px;  }

2.    跟水平居中一样，垂直也可以用定位的方法：

1 2 3 4 5 6 7 8 9 10 11 12 13

.content{     position:absolute;     top:0;     bottom:0;     left:0;     right:0;     margin:auto; } 或者 .content{     position:absolute;     top:50%; }

定位的方法，它的缺点是当没有足够的空间时，元素会消失。

3.    对此，浮动也是可以的：

1 2 3 4 5 6 7 8 9 10

.content{     float:left;      top:50%;       margin-bottom:-120px; } .footer{     clear:both;     height:240px;     position:relative; }

对于浮动，我们需要在之后清除，并显示在中间。

4.    也可以使用vertical-align属性：

1 2 3 4

.content{     display:table-cell;     vertical-align:middle; }

这种方法可以随意改变元素高度，但在IE8中无效。

现在来看个div模块在屏幕中居中的例子：

1 2 3 4 5

position: absolute;  top: 50%;  left: 50%;   //上下移动屏幕的50% margin: auto; -webkit-transform: translate(-50%,-50%);     //减去自身的50%（多移动的） -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);

这个基本可以不确定宽高的模块居中，但是在低版本的浏览器中可能出现问题，现在还没测试过，但是主流的都是可以的！