让人蛋疼的百分比相对定位问题，求高人解答

峭沙 2012-01-15 03:35:29

<!doctype html>

<html>

	<head>

		<style type="text/css">

			#test{

				border:1px solid black;

			}

			#sub{

				position: relative;

				width: 200px;

				top: 50%;

				left: 50%;

			}    

		</style>

	</head>

    <body>

		<div id="test">

			<div id="sub">asljkkdfjkasdf</div>

		</div>

    </body>        

</html>

这个简单的页面在firefox,chrome下并没有出现预想的效果，而在一向被我摒弃的IE上面，居然。。好吧，这个是的对相对定位的理解错误呢还是firefox, chrome的bug？

...全文

360 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

峭沙 2012-02-06

打赏
举报

算了，回答都是牛头不对马嘴。还是把分比较热心的7楼吧

xingqiliudehuanghun 2012-02-06

打赏
举报

<!doctype html>

<html>

    <head>

        <style type="text/css">            

            #test{

                border: 1px solid black;

                height: 300px;

            }

            #sub{

                position: relative;

                width: 200px;

                left: 50%;

                top : 50%;

                margin-left:-100px;

                border:1px solid #ccc;

            }    

        </style>

    </head>

    <body>

        <div id="test">

            <div id="sub">asljkkdfjkasdf</div>

        </div>

    </body>        

</html>

xingqiliudehuanghun 2012-02-06

打赏
举报

<!doctype html>

<html>

    <head>

        <style type="text/css">            

            #test{

                border: 1px solid black;

                height: 300px;

            }

            #sub{

                position: relative;

                display : inline-block;

                width: 200px;

                left: 50%;

                top : 50%;

                margin-left:-100px;

                border:1px solid #ccc;

            }    

        </style>

    </head>

    <body>

        <div id="test">

            <div id="sub">asljkkdfjkasdf</div>

        </div>

    </body>        

</html>

问苍天人生几何 2012-02-06

打赏
举报

试下下面的代码

<html>

    <head>

        <style type="text/css">

            #test{

                border:1px solid black;

            }

            #sub{

                position: absolute;

                width: 200px;

                top: 50%;

                left: 50%;

 		margin:-100 0 0 -100;

 		text-align:center;

            }    

        </style>

    </head>

    <body>

        <div id="test">

            <div id="sub">asljkkdfjkasdf</div>

        </div>

    </body>        

</html>

峭沙 2012-02-06

打赏
举报

还有个问题，为什么标准浏览器采用垂直百分比相对定位时会出现此问题？很不解啊很不解。。

峭沙 2012-02-06

打赏
举报

[Quote=引用 7 楼 iamaitman 的回复:]

测试了下，position为relative时，top如果为百分比的话，确实在不同浏览效果会有所不同，
建议在position为relative时，top不用百分比，而用数值
[/Quote]之所以会碰到这个问题是因为我想弄个垂直居中的效果来，当然上面的代码为便于理解是已经最简化了。而问题在于，用具体数值的话，不用js是不可能做到垂直居中的。
目前我想到的办法是IE6,7用相对定位+绝对定位来解决，而其他浏览器用display: table来解决。不知有没更简便的解决方案？

问苍天人生几何 2012-02-06