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%);

這個基本能夠不肯定寬高的模塊居中，可是在低版本的瀏覽器中可能出現問題，如今還沒測試過，可是主流的都是能夠的！