網頁設計中讓元素居中的方法

我們在進行Web前端代碼編輯時，經常會遇到元素需要居中的問題，爲此，特地總價了一下幾種讓元素居中的方法。

操作方法

（01）一、水平居中（text-align：center;）這個屬性在沒有浮動的情況下，我們可以將塊級元素轉換爲inline/inline-block，然後其父元素加上text-align:center;屬性就可以將其居中。如果是行內元素（比如span、img、a等）直接在父元素上添加text-align:center;屬性即可。

（02）二、使用margin:0 auto;水平居中前提：給元素設定了寬度和具有display：block；的塊級元素。讓一個DIV水平居中，只要設定了DIV的寬度，然後使用margin：0 auto，css自動算出左右邊距，使得DIV居中。

（03）三、定位實現居中(需計算偏移值)原理: 透過定位使元素左上角居中，再透過偏移值margin調整使元素中心居中。缺點：高度寬度需事先知道。<div class="absolute_p1"><div class="absolute_c1"></div></div>lute_p1 {position: relative;width: 200px;height: 200px;}lute_p1 lute_c1 {width: 100px;height: 100px;position: absolute; /* fixed 同理 */left: 50%; top: 50%;margin-left: -50px;margin-top: -50px; /* 需根據寬高計算偏移量 */}該方法普遍使用，但是前提必須知道元素的寬度和高度。如果當頁面的寬高是動態的，比方說頁面需要彈出一個DIV層必須要居中顯示，DIV的內容是動態的，所以寬高也是動態的，這是可以用jquery解決居中。

（04）四、jquery實現水平和垂直居中。jquery實現水平和垂直劇中的原理是透過jquery設定div的css，獲取div的左，上的邊距偏移量，邊距偏移量的算法就是用頁面視窗的寬度減去該div的寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div的css設定要在resize（）方法中完成，就是每次改變視窗大小是，都要執行設定div的css，代碼如下：$(function(){$(window)ze(function(){$('v')({position:'absolute',left:($(window)h()-$('v')rWidth())/2,top:($(window)ht()-$('v')rHeight())/2});});})此方法的好處就是不需要知道div 的具體寬度和高度，直接用jquery就可以實現水平和垂直居中，並且相容各種瀏覽器。這個方法在很多的彈出層效果中應用。

（05）五、定位實現居中(不需計算偏移值，margin：auto；和定位搭配使用)這種方法好處是行內元素和塊級元素都適用,但是需要知道元素本身的寬度。<div class="parent"><span class="child">margin:auto;和定位使用</span></div>nt{border: 1px solid #002FFF;width: 400px;height: 400px;position: relative;}d{width: 200px;height: 120px;background: #ddd;text-align: center;line-height: 120px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

（06）六、calc和定位的組合使用calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。以前我們可以使用box-sizing:border-box;來設定盒子的屬性爲不加上邊距。現在我們又多了一個選擇了。但要注意，兩者只能使用一個哦，否則就會造成衝突了。calc使元素居中的原理和負margin是一樣的，calc 允許你基於當前的頁面佈局計算尺寸。在上面的簡單計算中， 50% 是容器元素的中心點，但是如果只設定50%會使圖片的左上角對齊div的中心位置。我們需要把圖片向左和向上各移動圖片寬高的一半。計算公式爲：top: calc(50% - (w / 2));left: calc(50% - (h / 2));/*css*/div{border:1px solid red;width: 200px;height: 200px;position: relative;}div span{width: 150px;height: 50px;background: #ddd;position: absolute;top: calc(50% - (50px / 2));left: calc(50% - (150px / 2));}<div><span>我是span元素</span></div>

（07）七、使用css3的新屬性transform:translate(x,y)屬性這個方法可以不需要設定固定的寬高，在移動端用的會比較多，在移動端css3相容的比較好原理: 透過定位使元素左上角居中，再透過 translate 位移元素使之中心居中，由於 translate支援百分比，所以也就不用自己算偏移量了

（08）八、使用flex居中使用flex居中不需要知道元素本身寬高以及元素的屬性。/*css*/div{border:1px solid red;width: 200px;height: 200px;display: flex;justify-content: center;/* 水平居中*/align-items: center;/* 垂直居中*/}div span{background: #ddd;}<div><span>我是span元素</span></div>

（09）九、使用table-cell居中使用 display: table-cell, 而不是使用table標籤; 可以實現水平居中和垂直居中，但是這種方法需要添加額外的元素作爲外部容器。/*css*/er-aligned{border:1px solid red;width: 200px;height: 200px;display: table;}er-core{display: table-cell;text-align: center;vertical-align: middle;}span{background: #ddd;}<div class="center-aligned"><div class="center-core"><span>我是span元素</span></div></div>