DIV中如何设置里面的表格是垂直居中的？
发布网友
发布时间：2022-04-20 02:29
共1个回答
热心网友
时间：2023-12-02 17:19
1.建立txt文档，更改后缀名为html,如图：
2.右击html文件，选择用记事本打开，如图：
3.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】， transform中translate偏移的百分比值是相对于自身大小的，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的，但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下，不居中，如图：
4.讲解第二种div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，代码两个关键点：1.上下左右均0位置定位；2.margin: auto; 其width、height如何更改都是居中显示的，兼容性可以,IE7及之前版本不支持，如图：
5.讲解第三种div绝对定位水平垂直居中【要提前知道div宽度与高度的值实现绝对定位元素的居中】，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。兼容性好，如图:
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
