關於絕對定位的元素水平垂直居中的總結

馬上快元旦了，這一年即將過去了，新的一年又要開始了。元旦放假的時候會做乙個年終總結。

關於絕對定位的元素水平居中的常用的方法有兩種：

1.使用transform方法，這個方法的主要用法是

transform : translate(-50%,-50%);

其中可以這樣改寫：x軸上，transform : translatex(-50%);

y軸上，transform : translatey(-50%);

下面是乙個小例子，僅供參考：

html

>
<
html 
lang=
"en"
>
<
head
>
<
meta 
charset=
"utf-8"
>
<
title
>
元素的垂直居中
title
>
<
style
>
.elem1
.elem2
style
>
head
>
<
body
>
<
div 
class=
"elem1"
>
<
div 
class=
"elem2"
>
div>
div>
body
>
html
>

不過transform是css3裡面的內容，所以存在相容性問題；ie9(-ms-), ie10+以及其他現代瀏覽器才支援（手機web開發可忽略）。

2.使用   margin:auto實現絕對定位元素的水平垂直居中

這個方法是從張鑫旭大神寫的文章中看到的，所以放在一塊總結一下

這個方法主要有兩點需要注意，就是絕對定位的元素一定要設定為top：0；right：0；bottom：0；left：0；margin：auto；

這樣才能實現絕對定位，至於原理下面會說的，莫急

先看例項**：

html

>
<
html 
lang=
"en"
>
<
head
>
<
meta 
charset=
"utf-8"
>
<
title
>margin auto實現元素的水平垂直居中
title
>
<
style
>
.elem3
.elem4
style
>
head
>
<
body
>
<
div 
class=
"elem3"
>
<
div 
class=
"elem4"
>
div>
div>
body
>
html
>

利用絕對定位實現水平垂直居中

a.b style head class a class b div div body 重點講一下對子div b中css的理解 1.margin auto實現居中的原理 自動分配剩餘空間。眾所周知，僅僅使用margin 0 auto就可以將塊級元素水平居中，但是為什麼垂直水平居中不能單純的使用mar...

絕對定位的盒子如何實現水平垂直居中

如果沒有絕對定位 只需要設定margin 0 auto 就可以是盒子實現 水平垂直居中 但是如果設定了絕對定位，margin 0 auto 就沒有效果了，那此時又該怎麼實現呢？先來看乙個例子，實現如下圖的效果，多 品類齊全輕鬆購物 快 多倉直髮，極速配送 好 行貨 精緻服務 省 天天低價 暢選無憂 ...

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...