`
piperzero
  • 浏览: 3471526 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

实现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代码即可。


分享到：
| php中mkdir中错误，浪费时间甚多
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div的内容图片垂直居中代码（兼容多浏览器）.rar

    介绍： 很多朋友都在问这个问题，div的内容图片垂直居中代码，这个代码兼容多浏览器。

    DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具体实现css 如下，感兴趣的朋友可以参考下哈

    div+css文本水平垂直居中，兼容ie、谷歌等浏览器

    div+css文本水平垂直居中，兼容ie、谷歌等浏览器

    div图片垂直居中 如何使div中图片垂直居中

    div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px...

    纯CSS实现不固定大小div相对于body垂直居中效果

    兼容IE8/IE9/IE10/IE11 火狐，谷歌，360等各种主流浏览器 相对于body居中的另外一种写法 原理比较难以理解，这里只简单的说下如何使用： 1、在body的根目录下建立两个嵌套的div 2、分别给两个...

    CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，...

    div+css有实例,易学易懂

    6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的...

    css浏览器兼容性前端人员的必备

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题 设置为float的div在ie下设置的...

    CSS图片响应式 垂直水平居中

    4.图片始终保持水平垂直居中。 5.图片的行列数不变，这里一直都是3*3. 下面来搞定一个个要求。 满足要求1意味着这里要尽量不使用高级浏览器才有的属性，比如高级浏览器居中常用的什么 display:table-cell;vertical-...

    46种常见的浏览器兼容性问题大汇总

    9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16....

    实现div垂直居中的display:table-cell方法示例介绍

    要实现盒模型中的div居中，可以使用display:table-cell方法且兼容多浏览器，下面有个示例，感兴趣的朋友可以练练手

    CSS 多浏览器兼容性问题及解决方案

    Javascript 多浏览器兼容性问题及解决方案 ...4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

    让div+css兼容所有浏览器的一些注意事项

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: ...

    CSS解决未知高度的垂直水平居中自适应问题

    今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] &lt;style&gt; body { text-align:center} #info{ margin:0

    div css布局解决浏览器兼容及优化等实用技巧

    &lt;div class=”v-align”&gt;垂直居中&lt;/div&gt; 清除浏览器默认样式 1.用其他有名的库来清除（如：YUI) 2.自已清除 如： * {padding: 0;margin:0;} 让A支持所有浏览器 Html代码 复制代码代码如下: &lt;style type=”...

    最全的CSS浏览器兼容问题—HTMLCSS教程1

    1.div的垂直居中问题 vertical­align:middle; 将行距增加到和整个DIV一样高 line­height:200px; 然后 5.页面的最

Magicbox
Global site tag (gtag.js) - Google Analytics