• 技术文章 >web前端 >html教程

    css中position:fixed实现div居中_html/css_WEB-ITnose

    2016-06-24 11:56:22原创642

    上下左右 居中

    代码如下 复制代码
    div{
    position:fixed;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:200px;
    height:150px;
    }

    如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可
    如果只需要上下居中,那么把 left:0; 或者 right:0; 即可

    下面附一个DIV 元素在浏览器窗口居中

    其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧:

    代码如下 复制代码

    我是在窗口正中央的,呵呵!

    设置的技巧全部在这里:

    代码如下 复制代码
    .dialog{
    position: fixed;
    _position:absolute; /* hack for IE6 */
    z-index:1;
    top: 50%;
    left: 50%;
    margin: -141px 0 0 -201px;
    width: 400px;
    height:280px;
    border:1px solid #CCC;
    line-height: 280px;
    text-align:center;
    font-size: 14px;
    background-color:#F4F4F4;
    overflow:hidden;
    }

    设置 position: fixed; _position:absolute;
    设置 left:50% 和 top:50%;
    设置 margin: -(DIV的offsetWidth/2) 0 0 -(DIV的offsetHeight/2)
    from:http://www.111cn.net/cssdiv/css/62281.htm

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:块级元素 Vs 内联元素_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 为什么是这样的?_html/css_WEB-ITnose• [翻译]解读CSS中的长度单位_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 如何考评一名前端工程师?_html/css_WEB-ITnose• web开发中比较常用的html标签_html/css_WEB-ITnose
    1/1

    PHP中文网