div垂直水平居中的问题

实习第三天boss让我实现一个问题,要求如下:

要求:一个大的盒子里套一个小盒子,小盒子是正的,然后它们放在body的正中央,适应屏幕的分辨率和兼容IE6

不可以用js用纯的css实现

我自己用了两个方法基本上实现了要求,但是如何能让中间的小的正方div也自适应呢?继续思考这个问题。

第一种:思路是外层大盒子自适应(百分比形式),小盒子固定width和height(我不会让它们自适应,然后长和宽相同,谁会告诉我一下吧,我自己也在继续考虑),因为大盒子的宽度是自适应的,而小盒子的宽度是固定的,又希望小盒子能在中间,我采用的是两个同级div它们的Css相同,只是数据稍微变化,即可实现。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box</title>
<style>
	html{overflow-x:auto;overflow-y:auto;}
	body{text-align:center;width:100%;height:100%; margin:0 auto;}
	.out{width:60%;height:60%;min-height:200px;min-width:200px;background-color:green;border:0px solid black;left:20%;top:20%;position:absolute;}
	.in{width:200px;height:200px;background-color:red;border:0px solid black;left:50%;top:50%;margin-left:-100px;margin-top:-100px;position:absolute;}
</style>	
</head>
<body>
	<div class="out">
	</div>
	<div class="in">
	</div>
</body>
</html>


第二种方法:采用vertical-align:middle,但是这个属性仅适用于inline元素和td,所以就在td中套了一个div然后用其vertical-align属性,其他思路同一,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fourthbox</title>
<style>
	html{overflow-x:auto;overflow-y:auto;}
	body{text-align:center; margin:0 auto;vertical-align:middle;}
	table{width:100%;height:100%;}
	.outDiv{width:50%;height:50%;position:absolute;left:25%;top:25%;}
	.out{vertical-align:middle;width:100%;height:100%;background-color:red;}
	.in{width:100px;height:100px;background-color:white;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;}
	
</style>	
</head>
<body>
	<div class="outDiv">
	<table>
	<tr>
		<td class="out">
			<div class="in"></div>
		</td>
	</tr>
	</table>
	</div>
</body>
</html>

再写一种简单的,然后发上来,请大家指正,帮我找出来问题!谢谢


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值