css div如何居中显示

css div居中显示的方法：1、使用absolute绝对定位，代码为【absolute居中定位】；2、使用translate定位；3、使用Margin居中定位；4、使用fixed的居中定位。

本教程操作环境：windows7系统、css3版，DELL G3电脑。

css div居中显示的方法：

1、absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支持这种写法

htML>
        head>
            meta charset="UTF-8">
            tITle>
    absolute居中定位/title>
            style>
          *{
    margin:0;
padding:0}
          .absolutecenter{
     width:600px;
     height:400px;
    position:absolute;
     background: rgb(50,183,97);
     left:50%;
     top:50%;
     margin-left: -300px;
     margin-top: -200px;
  }
            /style>
        /head>
        body>
            div>
    我是absolute居中定位/div>
        /body>
        /html>
    

2、translate定位 这是css3 transform的属性 通过自身的偏移来定位 而且他有个极大的好处 不需要知道div的宽高度 就像js里的this self一样 可以将宽高度设为百分比 IE browserIE9不支持 在移动端使用较好

!doctyPE html>
        html>
        head>
            meta charset="UTF-8">
            title>
    translate居中定位/title>
            style>
        　　*{
    margin:0;
padding:0}
        　　.translateCenter{
     width: 40%;
     height: 20%;
     position: absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%);
     background: #2d2d2d;
}
            /style>
        /head>
        body>
            div>
    我是translate居中定位/div>
        /body>
        /html>
    

3、margin居中定位 不需要确定div的宽高度 让top,bottom,left,right都为0 再加个margin:auto 神来之笔 IE browser IE 8不支持

!doctype html>
        html>
        head>
            meta charset="UTF-8">
            title>
    margin居中定位/title>
            style>
        　　*{
    margin:0;
padding:0}
       　　 .marginCenter{
     width:200px;
     height: 200px;
     position: absolute;
    left:0;
     top:0;
     right:0;
     bottom: 0;
     margin: auto;
     background: #f2056e;
}
            /style>
        /head>
        body>
            div>
    我是margin居中定位/div>
        /body>
        /html>
    

4、fixed的居中定位 这个用的最多的可能就是导航条这块儿 让导航条居中显示不随页面滚动

!doctype html>
        html>
        head>
            meta charset="UTF-8">
            title>
    fixed居中定位/title>
            style>
        *{
    margin:0;
padding:0}
        .fixedCenter{
    max-width:980px;
     height:70px;
     position:fixed;
     margin:0 auto;
     left:0;
     right:0;
     background:rgb(67,163,244);
}
            /style>
        /head>
        body>
            div>
    我是fixed居中定位/div>
        /body>
        /html>
    

相关教程推荐：CSS视频教程

以上就是css div如何居中显示的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！