div垂直水平居中的问题

最新推荐文章于 2023-05-25 14:38:05 发布

Marcia_gm

最新推荐文章于 2023-05-25 14:38:05 发布

阅读量989

点赞数

分类专栏：开发

本文链接：https://blog.csdn.net/u012767697/article/details/18221827

版权

开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实习第三天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>


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