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

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
<
div 
class
="box"
>
2223
div>
2425
body
>
26html
>

2、css3實現水平垂直居中

注意：無論元素的尺寸是多少，都可以居中。不過ie8以上才相容這種寫法，移動端可忽略。

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
>
20<
div 
class
="box"
>
21div
>
22body
>
23html
>

3、margin：auto實現居中

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>document
title
>
6<
style
>
7.box
19style
>
20head
>
21<
body
>
22<
div 
class
="box"
>
23div
>
24body
>
25html
>

**載：

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

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的一半,否...

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

缺點 需要提前知道元素的寬度和高度。doctype html en utf 8 document title box style head 相對定位元素 box 絕對定位元素 div div body html 當元素的尺寸不固定時，都可以居中。不過ie8以上才相容這種寫法，移動端可忽略。docty...