《CSS实现垂直居中的5种方法.docx》由会员分享，可在线阅读，更多相关《CSS实现垂直居中的5种方法.docx（7页珍藏版）》请在三一文库上搜索。
1、利用CSS来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确 的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用CSS实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。（可以看看测试 页面，有简短解释。）方法一这个方法把一些div的显示方式设置为表格，因此我们可以使用表格的 vertical-align property属性。Content goes here #wrapper display : table ;#cell display :table- cell ; vertical-align
2、 : middle ;优点：content可以动态改变高度（不需在CSS中定义）。当wrapper里没有足够空间时，content 不会被截断缺点：Internet Explorer（ 甚至IE8 beta）中无效，许多嵌套标签（其实没那么糟糕， 另一个专题）方法二：这个方法使用绝对定位的div ,把它的top设置为50%, top margin 设置为 负的content高度。这意味着对象必须在 CSS中指定固定的高度。因为有固定高度，或许你想给content 指定overflow:auto，这样如果content太多的话，就会出现滚动条，以免 content溢出。Content goes
3、here #content position : absolute ;top : 50 %;height : 240Px ;margin-top : -120px ; /* negative half of the height */）优点：适用于所有浏览器不需要嵌套标签缺点：没有足够空间时，content会消失（类似div在body内，当用户缩小浏览器窗 口，滚动条不出现的情况）方法三这种方法，在content元素外插入一个div 。设置此div height:50%;margin-bottom:-contentheight; 。content消除浮动，并显示在中间。Content here
4、/ div#floater margin-bottom #content float : left ; height :-120px ; clear : both ; height: 50 %;:240px ; position : relative ;优点：适用于所有浏览器没有足够空间时（例如：窗口缩小）content 不会被截断，滚动条出现缺点：唯一我能想到的就是需要额外的空元素了 （也没那么糟，又是另外一个话题）方法四这个方法使用了一个 position:absolute ,有固定宽度和高度的div。这个div 被设置为top:0; bottom:0;。但是因为它有固定高度，其实并不能和
5、上下都问 距为0,因此margin:auto;会使它居中。使用margin:auto; 使块级元素垂直居中是很简单的。Content here #content position : absolute ;top : 0;bottom : 0;left : 0;right : 0;margin : auto ;height : 240px ;width : 70 %优点：简单缺点：IE(IE8 beta) 中无效无足够空间时，content被截断，但是不会有滚动条出现方法五这个方法只能将单行文本置中。只需要简单地把 line-height设置为那个对象的height值就可以使文本居中了。Cont
6、ent here #content height : 100px ; line-height : 100px ;优点：适用于所有浏览器无足够空间时不会被截断缺点：只对文本有效(块级元素无效)多行时，断词比较糟糕这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。哪个方法？我最喜欢的是方法三，缺点不多。因为 content会清除浮动，所以可以在它上 面放置别的元素，并且当窗口缩放时，居中的content不会把另外的元素盖住。看 例子。Title Content Here #floater margin-bottom#top#contentfloat : left ; height :-1
7、20px ; float : right ; width clear : both ; height:50%: 100 %; text-align:240px ; position:center ;:relative ;现在你知道是怎么回事了，现在我们开始创建一个简单但是有趣的网站。最终的 样子是这样的： 步骤一以语义化标签开始是很好的。下面是我们的页面构成:#floater /* 把 content 置中*/#contred /*centre盒 */#side#logo#nav /*无序列表*/#content#bottom /*放置版权等*/这是我用到的xhtml代码：A Centred
8、CompanyACompanyHomeProductsBlogContactAboutPage TitleHolisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.Energistically simplify impactful niche markets via enabled imperatives.Holisticly predominate premium innovation after compelling scenarios.Seamle
9、ssly recaptiualize high standards in human capital with leading-edge manufactured products.Distinctively syndicate standards compliant schemas before robust vortals.Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.Heading 2Efficiently embrace customized web-readine
10、ss rather than customer directed processes.Assertively grow cross-platform imperatives vis-a-vis proactive technologies.Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.Conveniently streamline competitive strategic theme areas with focused e-markets.Phosfluores
11、cently syndicate world-class communities vis-a-vis value-added markets.Appropriately reinvent holistic services before robust e-services. Copyright notice goes here步骤二： 现在我们开始用一些基本的 CSS来给页面添加样式。把以下代码放入在我们的 html页面顶部被引入的 style.css 。html , body margin : 0; padding : 0; height : 100% body background : u
12、rl (page_bg.jpg ) 50%50%no-repeat #FC3; font-family :Georgia , Times , serifs ;#floater position : relative ; float : left ;height : 50 %; margin-bottom : -200px ;width : 1px ;)#centered position : relative ; clear : left ;height : 400px ; width : 80 % max-width : 800px ;min-width : 400px ;margin :
13、0 auto ;background : #fff ;border : 4px solid #666 ;)#bottom position : absolute ;bottom : 0 ; right : 0 ;)#nav position : absolute ; left : 0; top : 0; bottom : 0;right : 70 %padding : 20px ; margin : 10px ;)#content position : absolute ; left : 30% right : 0; top : 0; bottom : 0 ;overflow : auto ;
14、 height : 340px ;padding : 20px ; margin : 10px ;)在我们能够把content 垂直居中之前，body和html应该被拉伸到100%的 高度。由于 height在padding和margin之内，所以我们要把它们设成 0以防止因为很小的 margin出现滚动条。floater 的 margin-bottom 是 content 高度(400px)的一半，-200px。现在可以看到一下效果：#centred的宽度为80%。这可以市网页随着显示器的大小而变化。一般称作流体布局。设置min-width 和max-width以避免网页过大或者过小。但是I
15、E 不支持min/max-width。显然可以用固定宽度来代替。因为#centred 是相对定位的，在它里面我们可以用绝对定位来定位元素。设置#content 的 overflow:auto;以避免滚动条的出现。IE不怎么喜欢overflow:auto;除非我们指定高度(不是top和bottom 的定位，也不是 )因此我们给它指定高度。步骤三最后要做的就是再添加点样式，让页面好看点。从目录开始吧#nav ul list-style : none ;padding : 0; margin : 20px 0 0 0; text-indent : 0; )#nav li padding : 0; m
16、argin : 3px ;)#nav li a display : block ; background-color : #e8e8e8 ; padding : 7px; margin : 0;text-decoration : none ; color : #000 ; border-bottom : 1px solid #bbb ; text-align : right ;)#nav li a : :after content : ? ; color : #aaa ; font-weight : bold ; display : inline ; float : right ;margin
17、 : 0 2px 0 5px ;)# nav li a :hover , #nav li a :focus background : #f8f8f8;border-bottom-color : #777 ;)# nav li a :hover : :after margin : 0 0 0 7px; color : #f93 ;)# nav li a :active padding : 8px 7px 6px 7px ;)需要注意的是#centred 的圆角。CSS3中，应该有border-radius 属性来设 定圆角的半径（可参考CSS眨旅：border-radius（ 圆角）-糖伴西红柿
18、）。现 在的流行的浏览器都还不支持，除非用 -moz（Molilla Firefox） 或者-webit（Safari/Webkit）前缀.兼容性注意事项如你所想，IE是唯一添麻烦的浏览器。#floater 必须指定宽度，否则在任意版本IE中，它都啥也不干IE 6中目录被周围太多的空间打断IE 8有多余空间（作者遗漏）更多的想法利用居中的网页可以做很多有意思的事情。我在重新设计 SWFObjectGenerator2.0 (使用SWFObject2.0生成代码)使用了这个想法。这里有另外的一个想法。资料以下是我参考的一些资料，推荐阅读。Understanding vertical- align, or “How (Not) To Vertic ally CenterContent ”Vertical centering using CSSVertical Centering in CSS糖伴西红柿说：水平居中经常用，其实垂直居中也很有用的。平时用的最多的应该是方法五了，算是个小技巧吧。原文：译自：/vertical-centering-with-css/