代码改变世界

关于div的居中显示

2015-08-21 19:37  怡红院丿无痕  阅读(400)  评论(0)  编辑  收藏  举报

让一个大的div在页面居中显示:

html代码如下:

<body>
        <div id="container"></div>
</body>

 

不完善的方法:

1、仅仅在IE浏览器中居中

<style type="text/css" media="screen">

            * {
                padding: 0px;
                margin: 0px;
            }

           /**
            *仅仅在IE浏览器中居中
           /
            body{
                text-align: center;
            }


            #container {
                width:1100px;
                height: 500px;
                border: 1px solid #229;
              
                
            }
   </style>

2、在IE浏览器外，其他的浏览器中居中

<style type="text/css" media="screen">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            #container {
                width:1100px;
                height: 500px;
                border: 1px solid #229;
                margin: auto; /* 在IE浏览器外的浏览器，实现居中 */
                
            }
        </style>

2、在所有的浏览器中居中

<style type="text/css" media="screen">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            #container {
                width:1100px;
                height: 500px;
                border: 1px solid #229;

                /**
                 *下面三局代码，实现所有浏览器的居中
                /
                position: absolute;
                left:50%;
                margin-left: -550px; /* #container宽度的一半*/
                
            }
        </style>