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

首先，咱们来了解水平居中,它有不少种方法，咱们暂时先来了解其中的几种：

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

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

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

2.    咱们对于定位也是经常使用的，在这里固然也能够采用定位的方法来实现：

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

3.   既然定位能够，那浮动也是能够的：

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

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

body{
   vertical-align:middle; 
}

 5.    利用table:

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

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

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

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

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

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

 2.    跟水平居中同样，垂直也能够用定位的方法：

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

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

3.    对此，浮动也是能够的：

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

    对于浮动，咱们须要在以后清除，并显示在中间。

4.    也能够使用vertical-align属性：

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

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

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

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

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