CSS+DIV创设一个可爱的小中心网站

CSS+DIV创建一个可爱的小中心网站
有几种不同的方式到垂直中心与CSS的对象，但它是很困难的选择是正确的。我会告诉你所有我见过的最好的方式，以及如何创建一个可爱的小中心网站。用CSS垂直居中是不是一件容易的事。有许多不同的方式，在某些浏览器可能无法正常工作。让我们回顾一下5种不同的方式垂直居中的对象，以及每种方法的优点和缺点。（你可以看到我简要地解释他们所有的测试页。）

方法1

此方法设置一些<DIV> s到像一个表显示，所以我们可以使用表的垂直对齐属性（非常不同的其他元素）。

#content {position:absolute; top:50%; height:240px; margin-top:-120px;  / *负半的高度* / }
区别
作品在所有浏览器
不需要嵌套标签
当没有足够的空间，内容消失（如格是身体内的用户缩小浏览器窗口，滚动条不会出现）
方法3
在此方法中，我们将插入一个div上面的内容元素。这将设置高度：50％;和利润率底：-contentheight的。的内容，然后将清除浮动，并最终在中间。
#floater{float:left; height:50%; margin-bottom:-120px;}#content{clear:both; height:240px; position:relative;}
区别
作品在所有浏览器
当没有足够的空间（即窗口缩小），我们的内容将不会被切断，会出现一个滚动条。
只有一个我能想到的是，它需要一个额外的空元素（这是不坏，另一个主观题）
方法4
这种方法使用的位置是：绝对有一个固定的宽度和高度的div。的div，然后告诉拉伸至顶部：0;底部：0; 不能因为固定高度，因此保证金：自动;使坐在中间。这是类似的使用非常普遍的保证金：0汽车;水平中心块元素。
#floater{float:left; height:50%; margin-bottom:-120px;}#top{float:right; width:100%; text-align:center;}</strong>#content{clear:both; height:240px; position:relative;}
现在你知道它是如何工作的，让我们开始创建一个简单但有趣的网站！最终产品将是这个样子：
第1步
它总是好的开始，语义标记。这是我们的页面如何将结构：
＃浮子（推到中间的内容）
＃中心（中心框）
＃方
＃标志
＃NAV（无序名单<UL>）
＃内容
＃底部（版权等）
这里是我将使用XHTML代码：
＃为本的宽度是80％。这是使您的网站上的小屏幕和大屏幕上宽小（我的中大屏幕上，许多老的网站是在左上角的小，它是有点恼人）。这被称为有液体的布局。设置最小宽度和最大宽度也停止过大或过小。互联网的总管doen't支持分钟最大widtgh虽然。很明显，你可以选择，而不是有一个固定的宽度。
因为＃为中心的相对位置，我们可以使用它里面的绝对定位来定位元素。溢出：汽车上使用＃内容，所以会出现一个滚动的内容时，它里面不适合。Internet Explorer中不喜欢溢出：汽车;除非我们告诉它的高度（不只是顶部和底部的位置，而不是在％），所以我们也这样做。
第3步
最后要做的是添加一些更多的风格，以使它看起来有点更好。让我们开始菜单。
第4步
最后要做的是添加一些CSS使页面看起来有点更好。
兼容性说明
正如你可能已经猜到了，Internet Explorer是唯一的主浏览器，给你带来麻烦：
＃浮子必须有宽度的定义，它不会做任何版本的IE浏览器中的任何
IE 6有太多的空间，在我们的菜单打破
IE 8以上的额外空间
站长百科同步首发原文地址 http://www.software8.co/wzjs/cssdiv/268.html