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 ;       height : 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 ; }

转载于:https://my.oschina.net/u/1865859/blog/313088