div垂直水平居中的问题

来源：互联网发布：it机房编辑：程序博客网时间：2024/05/29 17:42

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

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


                                                     0        0           	
					
					   div垂直水平居中的问题
	  	   div居中问题垂直居中，垂直水平居中
	  	   关于css中两层div的水平垂直居中问题
	  	   关于css中两层div的水平垂直居中问题
	  	   div水平垂直居中问题以及解决方法的兼容性
	  	   单个div的水平垂直居中问题总结
	  	   DIV水平和垂直居中问题
	  	   div水平垂直居中
	  	   DIV 水平垂直居中
	  	   div 水平垂直居中
	  	   div水平垂直居中
	  	   div垂直水平居中
	  	   div水平垂直居中
	  	   div水平垂直居中
	  	   div水平垂直居中
	  	   div水平垂直居中
	  	   DIV水平垂直居中
	  	   div 水平居中 垂直居中
	     		  
	  	   Sum
	  	   互联网设计之道：如何设计新闻类型的门户网站
	  	   上海推进大数据研究与发展三年行动计划（2013-2015年）
	  	   Microsoft100——14.找数
	  	   Win8下获取系统开机时间
	  	   div垂直水平居中的问题
	  	   (format 10, created by Subversion 1.6)问题
	  	   正方形
	  	   audioFlinger中的生产者消费者系统
	  	   Linux下的定时器类实现(select定时+线程）
	  	   linux网络协议栈(二)用户配置方式(netlink套接字)
	  	   谷歌修复了FFmpeg中上千个bug
	  	   [Leetcode] Edit Distance (Java)
	  	   Linux的ftp安装及使用