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

来源：互联网 2023-03-16 19:17:40 版权归原作者所有，如有侵权，请联系我们

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

工具/原料

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

方法/步骤

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

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

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

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

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

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

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

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

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

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

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

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

6本页面未经授权抓取自百度经验

7.全部代码如下：

html> style > .div1{ width: 100px; height: 100px; border:4px solid red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);/*50%为自身尺寸的一半*/ }

.div2{ width:200px;height:200px; border:5px solid black; position:absolute; left:0; top:0;bottom:0;right:0; margin:auto;/*50%为自身尺寸的一半*/ }

.div3{width:300px;height:300px; border:3px solid green; position:absolute; left:50%;top:50%; margin-left:-150px;/*200为宽度尺寸的一半*/

margin-top:-150px;/*200为高度尺寸的一半*/

} /style>

body> div class="div1">我是div1/div> div class="div2">我是div2/div> div class="div3">我是div3/div> /body> /html>

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS

上一篇：DW如何制作特效步骤提醒导航效果模板+验证码下一篇：CSS3如何实现元素水平居中、垂直居中

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

工具/原料

方法/步骤

热门文章

标签列表