CSS实现垂直居中的几种实现方式.docxVIP

注：此文由断指鹤搜集而来，都在高级浏览器下测试过，但不敢保证IE8以下会不会出现问题。 页面设计中垂直居中几种实现方式： 垂直居中主要用两种情况，第一种是内外元素的高度全定，这种情况处理起来相对简单，方法也很多；第二种是外高度定了，但内高度不定，这种情况处理起来相对困难。下面，便介绍下两种情况下的解决方案。 内外元素高度全部确定的情况 1、line-height与height值设相同值。 此种方法最简单，但局限性很大，只有单行文本才能够适用。具体示例如下： CSS写法： .vertical{ height: 100px; line-height:100px; } HTML写法： div class=”viertical”this is a test/div 此方法优点：适合在所有浏览器，没有足够空间时，内容不会被切掉。 此方法缺点：仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。 2、给父容器设置相对定位，然后将本元素也设置为相对定位，top设置成50%，margin-top设置成：height/2，具体示例如下： CSS代码： .out{ position:relative; width：400px; height: 400px; border: solid 1px gray; } . .vertical{ height: 100px; width: 100px; border: solid 1px gray; position:relative; top:50%; margin-top:50px; } HTML代码： div class=”out”div class=”vertical/div/div 此方法优点：能够在多浏览器下运行，适用任何定高的div。 此方法缺点：由于固定死元素的高度，致使没有足够的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现）。 3、这种方法有点新意，用这种方法你需要在居中元素前面放一个空的div（块元素就可以），然后设置这个div的高度为50%，margin-bottom为元素高度的一半，而且居中元素需要清除浮动。需要注意的是，使用这种方法，如果你的居中元素是放在body中的话，你需要给html,body设置一个“height:100%”的属性。 CSS代码： html,body {height: 100%;} #floater{ float:left; height:50%;/*相对于父元素高度的50%*/ margin-bottom: -120px;/*值大小为居中元素高度的一半*/ } #content { clear:both;/*清除浮动*/ height: 240px; position: relative; } HTML代码： body div id=floater!--This block have empty content --/div div id=contentContent section/div /body 此方法优点：兼容所有浏览器。 此方法缺点：元素高度需确定，内容不够时，若设置overflow属性，元素会被切掉，或是出现滚动条； 内外元素高度全部确定实现方法挺多的，这里就不一一介绍了，下面介绍下外高度定，内高度不定的情况。 外层元素高度确定，内层高度不确定的情况 1、使用div的模拟表格效果，也就是说将多个div的“display”属性设置为 “table”和“table-cell”，并设置他们的“vertical-align”的属性值为“middle”。 CSS代码： #container { height: 300px; display: table;/*让元素以表格形式渲染*/ } #content { display:table-cell;/*让元素以表格的单元素格形式渲染*/ vertical-align: middle;/*使用元素的垂直对齐*/ } HTML代码： div id=containerdiv id=contentcontent/div/div 此方法优点：没有高度限制； 此方法缺点：这种方法只适合现代浏览器，在IE6-7下无法正常运行。 5、这种方法是采用的display:inline-block，然后借助另一个元素的高度来实现居中 CSS代码： #parent { height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/ border: 1px solid red; } #vertica