注：此文由断指鹤搜集而来，都在高级浏览器下测试过，但不敢保证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;
css设置文字垂直居中    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"></div>
    <div id="content">Content 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="container"><div id="content">content</div></div>
此方法优点：没有高度限制；
此方法缺点：这种方法只适合现代浏览器，在IE6-7下无法正常运行。
5、这种方法是采用的display:inline-block，然后借助另一个元素的高度来实现居中
● CSS代码：
#parent {
    height: 500px;/*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/
    border: 1px solid red;
}
#vertically_center{
    display: inline-block;
  width: 100%;
  vertical-align: middle;
    border: 1px solid #f00;
}
#extra {
    display: inline-block;/*把元素转为行内块显示*/
    vertical-align: middle;/*垂直居中*/
    height: 100%; /*设置线盒型为父元素的100%高度*/
}
● HTML代码：
<div id="parent">
    <div id="vertically_center">
        <p>I am vertically centered!</p>
    </div>
    <div id="extra"></div>
</div>
此方法优点：可自适应高度，简单易懂；
此方法缺点：需一个额外的标签，且IE6-7不支持block-inline属性，所以其在IE6-7下不起作用；
6、用line-height来定义最外层的行高（例如：原来的height为200px，此方法将line-height设置为200px，不给height设值）
● CSS代码：
.vertical-outer{
    line-height: 150px;
    border: 1px dashed #ccc;
    width: 300px;
}
.vertical-inner{
    line-height: 24px;
    vertical-align: middle;
    display: inline-block;
    font-size: 18px;
  margin-bottom: 6px;
}
HTML代码：
<div class="vertical-outer">
        <span class="vertical-inner">this is a test this is a test this is a test this is a test this is  a test</span>
</div>
此方法优点：可自适应高度,简单易懂
此方法缺点：只支持HTML，且需要一个margin-bottom的修正值，为内部元素行高的四分
之一。
以上便是常见的用CSS实现元素居中的方法了，当然，面对一些特殊问题，一些难处理的垂直居中，可以考虑用JS来处理。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。