返回
css实现垂直居中的5种方法

css实现垂直居中的5种方法

ID：18139353

大小：115.31 KB

页数：8页

时间：2018-09-14

上传者：U-3744
css实现垂直居中的5种方法_第1页
css实现垂直居中的5种方法_第2页
css实现垂直居中的5种方法_第3页
css实现垂直居中的5种方法_第4页
css实现垂直居中的5种方法_第5页
资源描述：

《css实现垂直居中的5种方法》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

CSS实现垂直居中的5种方法天涯何处发表于:2009-3-0814:40来源:黄家湖社区博客门户[i=s]本帖最后由天涯何处于2009-3-814:43编辑利用CSS来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用CSS实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)方法一这个方法把一些div的显示方式设置为表格，因此我们可以使用表格的vertical-alignproperty属性。  Contentgoeshere

#wrapper{display:table;}#cell{display:table-cell;vertical-align:middle;}优点：content可以动态改变高度(不需在CSS中定义)。当wrapper里没有足够空间时，content不会被截断缺点：InternetExplorer(甚至IE8beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)方法二：这个方法使用绝对定位的div，把它的top设置为50％，topmargin设置为负的content高度。这意味着对象必须在CSS中指定固定的高度。 因为有固定高度，或许你想给content指定overflow:auto，这样如果content太多的话，就会出现滚动条，以免content溢出。Contentgoeshere
#content{position:absolute;top:50%;height:240px;margin-top:-120px;/*negativehalfoftheheight*/}优点：适用于所有浏览器不需要嵌套标签缺点：没有足够空间时，content会消失(类似div在body内，当用户缩小浏览器窗口，滚动条不出现的情况)最新回复天涯何处at2009-3-0814:40:56方法三这种方法，在content元素外插入一个div。设置此divheight:50%;margin-bottom:-contentheight;。content清除浮动，并显示在中间。  Contenthere#floater{float:left;height:50%;margin-bottom:-120px;}#content{clear:both;height:240px;position:relative;}优点：适用于所有浏览器没有足够空间时(例如：窗口缩小)content不会被截断，滚动条出现缺点：唯一我能想到的就是需要额外的空元素了(也没那么糟，又是另外一个话题)方法四这个方法使用了一个position:absolute，有固定宽度和高度的div。这个div被设置为top:0;bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为0，因此margin:auto;会使它居中。使用margin:auto;使块级元素垂直居中是很简单的。Contenthere#content{position:absolute;top:0;bottom:0;left:0;right:0; margin:auto;height:240px;width:70%;}优点：简单缺点：IE(IE8beta)中无效无足够空间时，content被截断，但是不会有滚动条出现方法五这个方法只能将单行文本置中。只需要简单地把line-height设置为那个对象的height值就可以使文本居中了。Contenthere#content{height:100px;line-height:100px;}优点：适用于所有浏览器无足够空间时不会被截断缺点：只对文本有效(块级元素无效)多行时，断词比较糟糕这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。天涯何处at2009-3-0814:42:19哪个方法？我最喜欢的是方法三，缺点不多。因为content会清除浮动，所以可以在它上面放置别的元素，并且当窗口缩放时，居中的content不会把另外的元素盖住。看例子。

Title

ContentHere#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/*centre盒*/#side#logo#nav/*无序列表*/#content#bottom/*放置版权等*/这是我用到的xhtml代码：ACentredCompany  ACompany
  • Home
  • Products
  • Blog
  • Contact
  • About

    • PageTitle

    Holisticlyre-engineervalue-addedoutsourcingafterprocess-centriccollaborationandidea-sharing.  Energisticallysimplifyimpactfulnichemarketsviaenabledimperatives.   Holisticlypredominatepremiuminnovationaftercompellingscenarios.  Seamlesslyrecaptiualizehighstandardsinhumancapitalwithleading-edgemanufacturedproducts.  Distinctivelysyndicatestandardscompliantschemasbeforerobustvortals.  Uniquelyrecaptiualizeleveragedweb-readinessvis-a-visout-of-the-boxinformation.

    Heading2

    Efficientlyembracecustomizedweb-readinessratherthancustomerdirectedprocesses.  Assertivelygrowcross-platformimperativesvis-a-visproactivetechnologies.  Convenientlyempowermultidisciplinarymeta-serviceswithoutenterprise-wideinterfaces.  Convenientlystreamlinecompetitivestrategicthemeareaswithfocusede-markets.  Phosfluorescentlysyndicateworld-classcommunitiesvis-a-visvalue-addedmarkets.  Appropriatelyreinventholisticservicesbeforerobuste-services.Copyrightnoticegoeshere天涯何处at2009-3-0814:44:18步骤二：现在我们开始用一些基本的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{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:0auto;background:#fff;border:4pxsolid#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;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以避免网页过大或者过小。但是IE不支持min/max-width。显然可以用固定宽度来代替。因为#centred是相对定位的，在它里面我们可以用绝对定位来定位元素。设置#content的overflow:auto;以避免滚动条的出现。IE不怎么喜欢overflow:auto;除非我们指定高度(不是top和bottom的定位，也不是％)因此我们给它指定高度。天涯何处at2009-3-0814:45:14步骤三最后要做的就是再添加点样式，让页面好看点。从目录开始吧。#navul{list-style:none;padding:0;margin:20px000;text-indent:0;} #navli{padding:0;margin:3px;}#navlia{display:block;background-color:#e8e8e8;padding:7px;margin:0;text-decoration:none;color:#000;border-bottom:1pxsolid#bbb;text-align:right;}#navlia::after{content:'»';color:#aaa;font-weight:bold;display:inline;float:right;margin:02px05px;}#navlia:hover,#navlia:focus{background:#f8f8f8;border-bottom-color:#777;}#navlia:hover::after{margin:0007px;color:#f93;}#navlia:active{padding:8px7px6px7px;}需要注意的是#centred的圆角。CSS3中，应该有border-radius属性来设定圆角的半径(可参考CSS3之旅:border-radius(圆角)-糖伴西红柿)。现在的流行的浏览器都还不支持，除非用-moz(MolillaFirefox)或者-webit(Safari/Webkit)前缀. 兼容性注意事项如你所想，IE是唯一添麻烦的浏览器。·#floater必须指定宽度，否则在任意版本IE中，它都啥也不干·IE6中目录被周围太多的空间打断·IE8有多余空间(作者遗漏)更多的想法利用居中的网页可以做很多有意思的事情。我在重新设计SWFObjectGenerator2.0(使用SWFObject2.0生成代码)使用了这个想法。这里有另外的一个想法。资料以下是我参考的一些资料，推荐阅读。Understandingvertical-align,or“How(Not)ToVerticallyCenterContent”VerticalcenteringusingCSSVerticalCenteringinCSS糖伴西红柿说：水平居中经常用，其实垂直居中也很有用的。平时用的最多的应该是方法五了，算是个小技巧吧。原文：http://www.qianduan.net/?p=5654译自：http://blog.themeforest.net/tutorials/vertical-centering-with-css/

    当前文档最多预览五页，下载文档查看全文

    此文档下载收益归作者所有

    当前文档最多预览五页，下载文档查看全文
    温馨提示：
    1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
    2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
    3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
    4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
    最近更新
    更多
    大家都在看
    近期热门

    首页

    分享

    客服

    关闭