絕對定位元素的水平垂直居中的方法

2021-09-05 10:19:43 字數 1076 閱讀 2413

缺點：需要提前知道元素的寬度和高度。

<


!doctype html>


"en"


>


"utf-8"


>


document<


/title>


.box


<


/style>


<


/head>


相對定位元素


="box"


>絕對定位元素<


/div>


<


/div>


<


/body>


<


/html>
當元素的尺寸不固定時，都可以居中。不過ie8以上才相容這種寫法，移動端可忽略。

<


!doctype html>


"en"


>


"utf-8"


>


document<


/title>


.box


<


/style>


<


/head>


相對定位元素


="box"


>絕對定位元素<


/div>


<


/div>


<


/body>


<


/html>入**片
使用margin：auto實現居中；

<


!doctype html>


"en"


>


"utf-8"


>


document<


/title>


.box


<


/style>


<


/head>


相對定位元素


="box"


>絕對定位元素<


/div>


<


/div>


<


/body>


<


/html>
以上就是絕對定位元素的水平垂直居中的方法，希望對大家的學習或者工作能帶來一定的幫助！

絕對定位元素的水平垂直居中

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 優點 相...

css 絕對定位元素水平垂直居中

position absolute top 0 left 0 right 0 bottom 0 margin auto 設定margin auto 設定left和right的值相等,top和bottom的值相等,注意 left和right的值不能超過其相對元素width減去它自身width的一半,否...

絕對定位元素的水平垂直居中的方法

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...