div水平垂直居中(兼容各浏览器)

最新推荐文章于 2021-09-08 14:57:31 发布

iteye_3606

最新推荐文章于 2021-09-08 14:57:31 发布

阅读量278

点赞数

文章标签： javascript ViewUI

实现div水平垂直居中（兼容各浏览器）：

1、当div的width和height已固定时，
用class=“div1”，不需要写id=“divId”，直接用css样式就可以实现水平垂直居中显示。
2、当div的width和height不固定时 ,
用class=“div2”，需要写id=“divId”，并加入js就可以实现水平垂直居中显示。

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>div水平垂直居中</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>
    <style type="text/css">
    .div1{
        width:200px;
        height:200px;
        background-color:red;
        position:absolute;
        top:50%;
        left:50%;
        margin:-100px 0 0 -100px;
    }
    .div2{
        background-color:gray;
        position:absolute;
        top:50%;
        left:50%;
        z-index:100;
    }
    </style>
    <script type="text/javascript">
    $(function(){
        var div = document.getElementById('divId');
        var _mLeft = -(div.clientWidth/2);
        var _mTop = -(div.clientHeight/2);
        $(div).css({"margin-left":_mLeft,"margin-top":_mTop});
    });
    </script>

</head>
<body>
<div class="div1">
         div1水平垂直居中
</div>
<div class="div2" id="divId">
         div2水平垂直居中
</div>
</body>
</html>

注意：例子中的jquery是我本地的，如果需要进行测试的话可以引入自己的jquery，或者是将jquery改为原生js代码即可。

iteye_3606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div水平垂直居中(兼容各浏览器)

实现div水平垂直居中（兼容各浏览器）：1、当div的width和height已固定时，用class=“div1”，不需要写id=“divId”，直接用css样式就可以实现水平垂直居中显示。2、当div的width和height不固定时 , 用class=“div2”，需要写id=“divId”，并加入js就可以实现水平垂直居中显示。具体代码如下：&lt;!...
复制链接

扫一扫