css实现固定⾼度及未知⾼度⽂字垂直居中的完美解决⽅案
在⼯作当中我们经常碰到类似于"固定⾼度⽂字垂直居中及未知⾼度垂直居中问题"，或者 "图⽚垂直居中问题"，⽽我们最容易会想到使⽤表格来垂直居中，或者如果是单⾏⽂字的话使⽤height(⾼度)和line-height（⾏⾼）来解决，但是假如页⾯有多⾏⽂字的话固定⾼度该怎么解决? 或者未知⾼度我们该⽤css怎么解决? 且兼容各个游览器！
⼀：单⾏⽂字垂直居中：
如果⼀个容器中只有⼀⾏⽂字的话，让他垂直居中⽐较简单直接定义height(⾼度)和 line-height(⾏⾼)相等即可。
如：<div >aa</div>
⼆：多⾏⽂本固定⾼度垂直居中：
1. 除IE7及IE7以下游览器多⾏⽂本固定⾼度垂直居中的解决⽅案。
我们都知道我们可以⽤表格的⽅式实现⽂本垂直居中，同理我们可以⽤css来模拟表格的⽅式垂直居中 vertical-align 属性只会对拥有valign特性的(X)HTML标签起作⽤,⽐如td等，但是对类似于span等这样的
标签并不起作⽤，如果我们不考虑IE7及以下的话我们可以⽤display:table 和 display:table-cell来模拟表格垂直居中。前者必须设置在⽗级元素上，后者必须设置在⼦元素上。⽐如如下HTML代码：
1<div class="wrapper">
2<div class="content">content age</div>
3</div>
相对应的css代码如下：
.wrapper{
height:400px;
display:table;
}
.content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
就可以实现除IE7及IE7以下的游览器⽀持⽂本垂直居中的问题！
2. 兼容IE6+ ⽕狐 google游览器的多⾏⽂本垂直居中的解决⽅案！
其实在标准游览器中解决的⽅案如上，现在的问题我们该怎么解决IE7及以下的版本的问题了，我们可以考虑⽤定位的⽅式来解决，在IE6中对⽗元素进⾏定位后，如果再对⼦元素进⾏百分⽐计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使⽤百分⽐计算的基础将不再是该元素的⾼度，⽽从⽗元素继承来的定位⾼度）。
⽐如HTML代码如下：
1<div class="wrap">
2<div class="subwrap">
3<div class="content">aaaaa</div>
4</div>
5</div>
我们可以对⽗级元素绝对定位 top:50%；然后在对⼦元素定位top:-50%，这样可以正好重叠了。css代码如下：
.wrap{
css固定定位border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
.subwrap{
position:absolute;
border:1px solid #000;
top:50%;
}
.content{
border:1pxsolid#000;
position:relative;
top:-50%;
}
所以针对上⾯的解决⽅案，我们可以稍微优化下在标准游览器下我们使⽤类似于表格的⽅式来解决但是对于像IE7及以下的版本我们可以使⽤绝对定位的⽅式来解决。所以优化下 css代码如下：
.wrap{
display:table;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
*position:relative;
overflow:hidden;
}
.subwrap{
vertical-align:middle;
display:table-cell;
*position:absolute;
*top:50%;
}
.content{
*position:relative;
*top:-50%;
}
三：多⾏⽂本未知⾼度垂直居中的解决⽅案：
其实思路还是上⾯的⼀样标准游览器版本下采⽤类似于表格的⽅式来垂直居中解决，对于IE7 6下采⽤定位的⽅式来解决。如下代码 HTML：
<div class="wrapper">
<div class="subwrap">
<div class="content">
关于 CSS 的未知⾼度⽔平垂直居中问题<br />
</div>
</div>
</div>
css：
body {padding:0;margin:0;}
.content{border:1px solid red;width:500px;margin:0 auto;font-size:12px;line-height:1.8;}
/*标准游览器版本*/
html,body{height:100%;}
.wrapper{text-align:center;width:100%;height:100%;display:table;}
.subwrap{display:table-cell;vertical-align:middle;}
/*IE6*/
*html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}
*html .subwrap{position:relative;top:-50%;text-align:center;}
/*IE7 可以合并但是为了更好说明没有合并*/
*+html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}
*+html .subwrap{position:relative;top:-50%;text-align:center;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论