div（固定寬度和不固定寬度）居中顯示的方法總結

今天我總結一下css實現div居中的方法，有的是固定寬度的，還有的是不固定寬度的。

1.使用自動外邊距實現DIV CSS居中

CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設置爲auto便可。在實際使用中，咱們能夠爲這些須要居中的元素建立一個起容器做用的div。須要特別注意的一點就是，必須爲該容器指定寬度：

div#container{  
 
margin-left:auto;  
 
margin-right:auto;  
 
width:168px;  
 
}

2.使用text-align實現DIV CSS居中

 

另外一種實現元素居中的方法是使用text-align屬性，將該屬性值設置爲center並應用到body元素上便可。這種作法是徹頭徹尾的hack，但它卻能兼容大多數瀏覽器，因此在某些狀況下也天然必不可少。

之因此說它是hack，是由於這種方法並無將文本屬性應用到文本上，而是應用到了做爲容器的元素上。這也給咱們帶來了額外的工做。在建立好佈局必須的div以後，咱們要按照以下代碼爲body應用text-align屬性：

body{  
 
text-align:center;  
 
}

以後會出現什麼問題嗎？body的全部子孫元素都會被居中顯示。

所以，咱們就須要用再寫一條規則，讓其中的文本回到默認的居左對齊：

p{  
 
text-align:left;  
 
}

能夠想象這條附加的規則將帶來一些不便。另外，真正徹底遵循標準的瀏覽器並不會改變容器的位置，而只會讓其中的文字居中顯示。

 

3.組合使用自動外邊距和文本對齊

由於文本對齊DIV CSS居中方式有着良好的向下兼容性，且自動外邊距方式也被大多數當代瀏覽器支持，因此不少設計師將兩者組合起來使用，以期讓居中效果獲得最大限度的跨瀏覽器支持：

body{  
 
text-align:center;  
 
}  
 
#container{  
 
margin-left:auto;  
 
margin-right:auto;  
 
border:1px solid red;  
 
width:168px;  
 
text-align:left  
 
}

但是這始終是個hack，不管如何也算不上完美。咱們仍是須要爲居中容器中的文本編寫附加的規則，但至少在各個瀏覽器中看起來都不錯。

 

4.負外邊距解決方案

 

負外邊距解決方案遠不是僅僅爲元素添加負外邊距這麼簡單。這種方法須要同時使用絕對定位和負外邊距兩種技巧。

下面是該方案的具體實現方法。首先，建立一個包含居中元素的容器，而後將其絕對定位於相對頁面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。

而後，將容器的左外邊距值設置爲負的容器寬度的一半。這樣便可將該容器固定在頁面水平方向的中點。

#container{  
 
background:#ffcurl(mid.jpg)repeat-ycenter;  
 
position:absolute;  
 
left:50%;  
 
width:760px;  
 
margin-left:-380px;  
 
}

5.在不設置 Div 元素的寬度（width）的狀況下，如何讓 Div 元素居中

最後一種方法，也是最近作響應式web開發時遇到的問題，在不設置寬的的狀況下怎麼讓div居中就是一個問題，下面我就講一下怎麼讓不設置寬度的div居中的方法

<div class="wrap">
      <div class="inner">讓這個div居中</div>
</div>
.wrap {
      float: left; /* 自適應內容寬度 */
      position: relative;
      left: 50%; }.inner {
      position: relative;
      left: -50%; 
}

.wrap 使用 float 是爲了讓 .wrap 的寬度等於 .inner 的寬度
讓 .wrap 的左邊在父層的中線上， 讓.inner 的左邊相對 .wrap 向左移動一半， 這樣就能夠實現 .inner 在.wrap 的父層的中間。

我的博客地址：www.pccxin.com