css居中div的幾種常用方法

在開發過程中，很多需求需要我們居中一個div，比如html文檔流當中的一塊div，比如彈出層內容部分這種脫離了文檔流等。不同的情況有不同的居中方式，接下來就分享下一下幾種常用的居中方式。

1.text-align:center方式

代碼：

<div class="center">
　　<span class="center_text">
	123
　　</span>
</div>

.center{
　　text-align:center;
}
center_text{
　　display:inline-block;
　　width:500px
}

這種方式可以水平居中塊級元素中的行內元素，如inline，inline-block；

 

 

但是如果用來居中塊級元素中的塊級元素時，如div中的div，一旦內層的div有自己的寬度，這種方法就會失效。只能讓里面div的文字等內容居中，而div仍然是左對齊的。

還有一種情況，當內部的元素脫離了文檔流，display:absolute的情況下，不管是否是塊級元素，都會居中，但是這種居中不是基於內部div的內容的，而是內部div最左端，內部div的最左端在div的中間（前提外部div設置了position:relative/absolute/fixed）；

 

 

2.margin:0 auto方式

代碼：

<div class="center">
　　<span class="center_text">
	我是塊級元素，我是塊級元素，我給自己設了display：block
　　</span>
</div>

　

center_text{
　　display:block;
　　width:500px
　　margin：0 auto；
}

這種對齊方式要求內部元素(.content_text)是塊級元素，並且不能脫離文檔流（如設置position:absolute）,否則無效。

 

3.脫離文檔流的居中方式。

 這種通常應用在自定義彈框當中，把背景層設置成透明灰色，內容居中顯示在最前面。

代碼：

<div class="mask">
　　<div class="content">
　　　　我是要居中的板塊
　　</div>
</div>

　

.mask{
　　display: block;
　　position: fixed;
　　top: 0;
　　left: 0;
　　width: 100%;
　　height: 100%;
　　background: #000;
　　filter: alpha(opacity=30);
　　-ms-filter: "alpha(opacity=30)";
　　opacity: .3;
　　z-index: 10000;
}
.center{
    display: block;
    position: fixed;
    _position: absolute;
    top: 50%;
    left: 50%;
    width: 666px;
    height:400px;
    margin-left: -333px;
    margin-top: -200px;
    z-index: 10001;
    box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;
    background-color: #fff;
}

效果：

 

 

這種居中方式，把內部div設置寬高之后，再設置top、left各為50%，設置完之后，這里是按照左端居中的，接着我們使用負邊距的方式調整，將margin-top設置為負的高度的一半，margin-left設置為負的寬度的一半，就可以居中了。

這種方式還有一種居中方法就是設置margin：-（內部div高度的一半） auto；這用就不用設置left的值了。

 

4.display:table-cell

display:table-cell配合width，text-align:center,vertical-align:middle讓大小不固定元素垂直居中,這個方式將要對其的元素設置成為一個td，float、absolute等屬性都會影響它的實現，不響應margin屬性;

 

代碼：

 

<div class="center">
　　<div class="center_text">
　　　　1111111
　　</div>
</div>

 

　

.center {
　　display: table;
　　width: 100%;
}
.center_text {
　　display: table-cell;
　　text-align: center;
　　vertical-align: middle;
}

　　

 

5.垂直居中

行內元素的垂直居中把height和line-height的值設置成一樣的即可。

代碼：

<div class="center">
　　<span class="center_text">
　　　　我是要居中的內容
　　</span>
</div>

　

center{
　　height：40px;
　　line-heigth:40px;
}

這樣內部的span標簽就可以居中了。

 

6.使用css3的translate水平垂直居中元素 

代碼：

<div class="center">
　　<div class="center_text">
　　　　我是要居中的內容
　　</div> 
</div>

　

.center {
    position: relative;
    height: 500px;}
.center_text{
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; 
    height: 600px;
}

這種方式將脫離文檔流的元素，設置top：50%，left：50%，然后使用transform來向左向上便宜半個內元素的寬和高。

 

7.使用css3計算的方式居中元素calc

代碼：

<div class="center">
　　<div class="center_text">
　　　　我是要居中的內容
　　</div>
</div>

　

.center {
    position: relative;
    height: 300px;
    width: 1000px;
    border: 1px solid #ccc;
}
.center_text{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 150px);
    width: 300px;
    height: 100px;
    border: 1px solid #000;
}

效果：

這種方式同樣是將脫離文檔流的元素，然后使用計算的方式來設置top和left；

 

以上是幾種居中的方式，前3種是比較常用的，只要了解原理，后幾種都是這個原理的不同實現方式。