多语言展示
当前在线:1228今日阅读:23今日分享:25

css样式如何设置div元素水平垂直居中的三种方法

CSS实现绝对定位元素的居中效果,有时候需要把一个元素进行居中,在这里讲解三种方法,各种方法有它的优缺点。
工具/原料

在这里是直接用Txt文档编写后更改后缀名为html

方法/步骤
1

1.建立txt文档,更改后缀名为html,如图:

2

2.右击html文件,选择用记事本打开,如图:

3

3.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】, transform中translate偏移的百分比值是相对于自身大小的,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的,但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下,不居中,如图:

4

4.讲解第二种div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,代码两个关键点:1.上下左右均0位置定位;2.margin: auto; 其width、height如何更改都是居中显示的,兼容性可以,IE7及之前版本不支持,如图:

5

5.讲解第三种div绝对定位水平垂直居中【要提前知道div宽度与高度的值实现绝对定位元素的居中】,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。兼容性好,如图:

6

6.在这里可以看到每个方法的优缺点不同,可以根据需要自行设置。三种方法的显示图:

7

7.全部代码如下:                                                                                                                                                                                                                                                                                                                                                                                               

我是div1
                                                                                 
我是div2
                                                                                 
我是div3
                                                                                                                                                                                                             

推荐信息