關於的居中

上午遇到了一個問題，<div>裏面的<dl>無法居中。

給<dl>添加樣式align:center 、align-self:center等等都試過了都不管用。

上網百度了下，有建議說：

給dl添加一個類.center{margin:0 auto;width:100px;height:100px;}給外面的div加一個類或者ID 總之是給外面的div加一個寬度，比如.div{width：500px;height：500px;}
<div class=“div”>
    <dl class="center">
        <dd>...</dd>
        <dd>...</dd>
    <dl>
</div>

也試過了，同樣不行。

於是自己就一點點修改樣式，刷新頁面，終於找到了解決辦法：

在css中dl的樣式裏   margin: auto;（不要帶0）

成功居中。

後記：思考了一下原因，原來是子元素中設置了float:left;在作怪，刪掉之後margin:0 auto;正常操作。

順便複習一下邊距問題：

margin 外邊距

border 邊框

padding 內邊距

一張圖來說話：

附帶一個別人的position居中方法（具體鏈接：http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html）特此表示感謝：

萬能的position大法

 

這個方法可以說真的是萬能的。當你爲一個元素無法居中而困擾的時候，可以果斷的使用他，而且幾乎沒有後遺症，絕對是前端工程師們居家旅行必備的手段之一。

 

具體的做法很簡單，首先給父元素寫上positon:relative，這麼做是爲了給子元素打上position:absolute的時候不會被定位到外太空去。接下去，寫上子元素的height和width，這個似乎是必須的

，某些瀏覽器在解析的時候如果沒有這2個值的話會出現意想不到的錯位。接着就是整個方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負數;

margin- left:一半的weight值的負數。整理一下之後，可能你會給你的子元素寫上這樣的css（當然，父元素也要先寫上width和height）

{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}

 

接下去就刷新頁面吧，你的子元素已經是居中顯示了。

 

使用這個方法的好處在於無論你是什麼形式的內容都可以馬上居中，而缺點就是必須對元素有確定的寬高值，否則的話可能就需要通過javascript來進行一些小計算了。