让一个div 垂直居中

mp3aaa 2009-09-12 12:49:41

谁有办法搬到

一个<DIV style="width:300px;height:300px;border:3px solid #FF0000;" ></div> 让他在整个页面垂直居中

不用 table 不要长篇大论

用最简单的代码来实现

...全文

77 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

crazy_kis 2009-12-09

打赏
举报

[Quote=引用 1 楼 beenz 的回复:]
css,支持跨浏览器
HTML code<html><head><title>iPage</title></head><style>
html,body{height:100%; margin:0px; font-size:12px;}

.mydiv{
background-color: #f9fff6;
border:3px solid #FF0000;
text-align: center;
line-height: 25px;
font-size: 13px;
font-weight: bold;
z-index:99;
width: 300px;
height: 300px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 half of its width*/
margin-top:-150px!important;/*FF IE7 half of its height*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/}</style><body><DIVclass="mydiv"></div></body></html>
[/Quote]

这个是对的，厉害，学习了

mp3aaa 2009-09-12

打赏
举报

...我的天啊为了一个居中写怎么多东西啊。。。

ksshihao 2009-09-12

打赏
举报

<html>

<head>

<style>   

body {padding: 0; margin: 0;}   

body,html{height: 100%;}   

#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:#333;}   

#outer[id] {display: table; position: static;}   

#middle {position: absolute; top: 50%;left: 0}   

#middle[id] {display: table-cell; vertical-align: middle; position: static;}   

#inner {position: relative; top: -50%; margin: 0 auto;}   

#content{width:500px; height:400px; border:1px solid red; background:#EEE; margin: 0 auto;}   

</style>  

</head>

<body>   

<div id="outer">   

    <div id="middle">   

        <div id="inner">   

             <div id="content" style="width:300px;height:300px;border:3px solid #FF0000;" > </div> 

        </div>   

    </div>   

</div>   

</body>  

</html>

BeenZ 2009-09-12

打赏
举报

css,支持跨浏览器



<html>  

    <head>

        <title>iPage </title>

    </head>

    <style>

        html,body {height:100%; margin:0px; font-size:12px;}



        .mydiv {

            background-color: #f9fff6;

            border:3px solid #FF0000;

            text-align: center;

            line-height: 25px;

            font-size: 13px;

            font-weight: bold;

            z-index:99;

            width: 300px;

            height: 300px;

            left:50%;/*FF IE7*/

            top:50%;/*FF IE7*/



            margin-left:-150px!important;/*FF IE7 half of its width */

            margin-top:-150px!important;/*FF IE7 half of its height*/



            margin-top:0px;



            position:fixed!important;/*FF IE7*/

            position:absolute;/*IE6*/



            _top:       expression(eval(document.compatMode &&

            document.compatMode=='CSS1Compat') ?

                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/



        }  

    </style>

    <body>

        <DIV  class="mydiv"> </div>

    </body>

</html>