《五种方法让CSS实现居中显示》由会员分享，可在线阅读，更多相关《五种方法让CSS实现居中显示（8页珍藏版）》请在金锄头文库上搜索。
1、五种措施让CSS实现居中显示（一）CSS使用 CSS 实现垂直居中并不容易。有些措施在某些浏览器中无效。下面我们看一下使对象垂直集中的5种不同措施，以及它们各自的优缺陷。措施一这个措施把某些 div 的显示方式设立为表格，因此我们可以使用表格的 vertical-align property 属性。 Content goes here#wrapper display:table;#cell display:table-cell; vertical-align:middle;长处：content 可以动态变化高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content
2、不会被截断缺陷：Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一种专项)措施二：这个措施使用绝对定位的 div，把它的 top 设立为 50，top margin 设立为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。由于有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会浮现滚动条，以免content 溢出。 Content goes here#content position:absolute; top:50%; height:240px; marg
3、in-top:-120px; /* negative half of the height */长处：合用于所有浏览器不需要嵌套标签缺陷：没有足够空间时，content 会消失(类似div 在 body 内，当顾客缩小浏览器窗口，滚动条不浮现的状况)措施三这种措施，在 content 元素外插入一种 div。设立此 div height:50%; margin-bottom:-contentheight;。content 清除浮动，并显示在中间。 Content here#floater float:left; height:50%; margin-bottom:-120px;#content
4、 clear:both; height:240px; position:relative;长处：合用于所有浏览器没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条浮现缺陷：唯一我能想到的就是需要额外的空元素了(也没那么糟，又是此外一种话题)措施四这个措施使用了一种 position:absolute，有固定宽度和高度的 div。这个 div 被设立为 top:0; bottom:0;。但是由于它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简朴的。 Content here#conte
5、nt position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%;长处：简朴缺陷：IE(IE8 beta)中无效无足够空间时，content 被截断，但是不会有滚动条浮现措施五这个措施只能将单行文本置中。只需要简朴地把 line-height 设立为那个对象的 height 值就可以使文本居中了。 Content here#content height:100px; line-height:100px;长处：合用于所有浏览器无足够空间时不会被截断缺陷：只对文本有效(块级元素无
6、效)多行时，断词比较糟糕这个措施在小元素上非常有用，例如使按钮文本或者单行文本居中收藏 分享 评分 答复 引用 订阅 TOP 发短消息 加为好友 蝴蝶 目前离线 UID32帖子80精髓0积分0威望0 金币0 阅读权限10在线时间1 小时注册时间-9-2最后登录-12-3艾凯游民UID32帖子80精髓0积分0威望0 金币0 在线时间1 小时注册时间-9-2沙发 蝴蝶刊登于 -9-15 15:09 | 只看该作者 RE: 五种措施让CSS实现居中显示（一）五种措施让CSS实现居中显示（二）哪个措施？我最喜欢的是措施三，缺陷不多。由于 content 会清除浮动，因此可以在它上面放置别的元素，并且当
7、窗口缩放时，居中的 content 不会把此外的元素盖住。Title Content Here#floater float:left; height:50%; margin-bottom:-120px;#top float:right; width:100%; text-align:center;#content clear:both; height:240px; position:relative;目前你懂得是怎么回事了，目前我们开始创立一种简朴但是有趣的网站。环节一以语义化标签开始是较好的。下面是我们的页面构成：#floater/*把 content 置中*/#contred/*centr
8、e 盒*/#side#logo#nav/*无序列表*/#content#bottom/*放置版权等*/这是我用到的 xhtml 代码：A Centred Company A Company Home Products Blog Contact AboutPage TitleHolisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled im
9、peratives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness
10、 vis-a-vis out-of-the-box information.Heading 2Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
11、Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently 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:url(page_bg.jpg) 50% 50% no-repeat #FC3; font-family:Georgia, Times, serifs;#floater positi
