1.負邊距實現絕對定位元素的居中：
1優點：相容性好。<
head
>
2<
style
type
="text/css"
>
3.container
9.box
19style
>
20head
>
21<
body
>
22<
div
class
="container"
>
23<
div
class
="box"
>
24div
>
25div
>
26body
>
缺點：需要提前知道元素的尺寸，否則margin負值的調整無法精確。此時，往往要借助js獲得。
2.利用transform中translate偏移實現絕對定位元素的居中：
1不是很理解的話，看圖可以加深點印象。比如：<
head
>
2<
style
type
="text/css"
>
3.container
9.box
18style
>
19head
>
20<
body
>
21<
div
class
="container"
>
22<
div
class
="box"
>
23div
>
24div
>
25body
>
第一步
第二步
優點：絕對定位元素的定位基準點是其有定位元素的祖先元素，transform中translate偏移的百分比值是相對於自身大小的，無論絕對定位元素的尺寸是多少，其都是水平垂直居中顯示的。
缺點：相容性不好。ie10+以及其他現代瀏覽器才支援, ie9(-ms-), ie10+以及其他現代瀏覽器才支援。中國盛行的ie8瀏覽器被忽略是有些不適宜的（手機web開發可忽略）。
3.margin:auto實現絕對定位元素的居中:
1**兩個關鍵點：<
head
>
2<
style
type
="text/css"
>
3.container
9.box
20style
>
21head
>
22<
body
>
23<
div
class
="container"
>
24<
div
class
="box"
>
25div
>
26div
>
27body
>
1.上下左右均0位置定位；
2.margin:auto
優點：權衡了上面的尺寸自適應以及相容性的乙個方案。
現在來探索一下margin:auto實現絕對定位元素的居中的原因：
當乙個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了，例如：
<div
class
="box"
>
div>
.box如果只有left屬性或者只有right屬性，則由於包裹性此時box寬度是0。但是在本例中，因為left/right同時存在，因此寬度就不是0，而是自適應於.box包含塊的padding box寬度，也就是隨著包含塊padding box的寬度變化，.box的寬度也會跟著一起變。
觸發流體特性且是絕對定位的元素的margin:auto填充規則和普通流體元素填充規則一模一樣：
1.如果一側定值，一側auto，auto為剩餘空間大小
2.如果兩側均是auto, 則平分剩餘空間
例如，下面的css**：
.father此時.son
.son這個元素的尺寸表現為「格式化寬度和格式化高度」，和.son設定尺寸，例如：
.son此時寬高被限制，原本應該填充的空間就被多餘了出來，這多餘的空間就是
margin:auto計算的空間，因此，如果這時候，我們再設定乙個margin:auto，那麼：
.son我們這個
.son元素就水平和垂直方向同時居中了。因為，auto正好把上下左右剩餘空間全部等分了，自然就居中了。 css 絕對定位元素水平垂直居中
position absolute top 0 left 0 right 0 bottom 0 margin auto 設定margin auto 設定left和right的值相等,top和bottom的值相等,注意 left和right的值不能超過其相對元素width減去它自身width的一半,否...
絕對定位元素的水平垂直居中的方法
缺點 需要提前知道元素的寬度和高度。doctype html en utf 8 document title box style head 相對定位元素 box 絕對定位元素 div div body html 當元素的尺寸不固定時，都可以居中。不過ie8以上才相容這種寫法，移動端可忽略。docty...
絕對定位元素的水平垂直居中的方法
1.css實現居中 缺點 需要提前知道元素的寬度和高度。1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6 style 7.box 17style 18head 19 body 2021...