1:单行文字垂直居中:

如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可。

  如:<div style="height:25px;line-height:25px;overflow:hidden">aa</div>

2:多行文本固定高度垂直居中:

核心:display:table 和display:table-cell ;vertical-align:middle;

兼容:ie7+

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; }

核心:display:table 和display:table-cell ;vertical-align:middle;以及使用绝对定位

兼容:ie6+


<div class="wrap">
<div class="subwrap">
<div class="content">aaaaa</div>
</div>
</div>
 

css代码部分:

.wrap{
display:table; //*****************************************display:table
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
*position:relative; //*************************************** *position:relative
overflow:hidden;
}
.subwrap{
vertical-align:middle; //************************************vertical-align:middle; display:table-cell; //*************************************display:table-cell
*position:absolute; 
*top:50%;
}
.content{
*position:relative;
*top:-50%;
}

3:多行文本未知高度垂直居中:

现代浏览器的最新版都支持inline-block,只有该死的ie6、7不支持inline-block,但ie6、7可以通过 display:inline;zoom:1;来模拟。

但是在firefox,safari,opera,ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距,其实这个是换行符,如果将 inline-block 元素间的换行符去掉,这3px的间距就会消失了。 
有没有在不影响代码美观的情况下去掉间距尼,答案是有的。可以在inline-block的父元素中加上 font-size:0;然后在 inline-block讲字体设回来。 

下面是inline-block兼容的代码: 

{
display:inline-block;
*display:inline;
*zoom:;
width:100px;
vertical-align:top;
}

 

css实现高度垂直居中的更多相关文章

  1. css未知高度垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 纯CSS基于窗口垂直居中

    都是IE8+的 <!DOCTYPE html> <html> <head> <title>基于窗口垂直居中 by 司徒正美</title> ...

  4. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  5. CSS实现完美垂直居中

    之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 tab ...

  6. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  7. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  9. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

随机推荐

  1. 基于Ace Admin 的菜单栏实现

    1.首先是数据库表必然包含以下几个字段Id ,ParnetId,Url,Name等 create table dbo.Module ( Id uniqueidentifier not null con ...

  2. JSPatch在MAC下的使用

    简单调研JSPatch的使用,之所以在MAC下是因为可以创建一个命令行的应用,简化无关代码.具体做法如下: 第一步,去https://github.com/bang590/JSPatch/tree/m ...

  3. 高级工程师->架构师

    1. 分解等级 技术人员典型的发展路径基本上都是下面的这个模式: 1) 0 ~1年:菜鸟,需要别人手把手来教 2)1 ~ 3年:初级,需要别人带你做 3)3 ~ 5年:高级,能独当一面,可以带初级技术 ...

  4. springboot结合swagger生成接口文档

    原文链接:https://www.cnblogs.com/xu-lei/p/7423883.html https://www.jianshu.com/p/b9ae3136b292 前后台分离的开发渐渐 ...

  5. opencv-视频分解图片

    1.加载视频2. info信息 3. 解码,parse方法解析视频 4. imshow展示或者保存imread # 视频分解图片 # 1 load 2 info 3 parse 4 imshow im ...

  6. flask-----No such file or directory绝对路径与相对路径

    No such file or directory: '\\uploads\\03.jpeg' 相对路径:加点,或者直接绝对路径(尽量使用绝对路径,通过python的os模块获取当前文件绝对路径) o ...

  7. C语言初步学习I/O函数scanf、getchar、printf和putchar

    scanf().printf().getchar()和putchar()这四个函数能够让用户和程序交流,所以被称为输入/输出函数,或简称为I/O函数. 这里先结合缓冲输入来讲讲scanf()和getc ...

  8. AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题

      var map, toolip, overlay;            var layer = new ol.layer.Vector();            var imgLayer = ...

  9. visual studio 2013 error: Page '312e8a59-2712-48a1-863e-0ef4e67961fc' not found.

    In order to resolve this error do the following : Open Developer Command Prompt for VS 2013 as “Run ...

  10. P1415 拆分数列

    传送门 DP数列长度过大无法枚举,考虑DP设f1[i]储存以第i个字符为结尾时,的最后一个数最小时,这个数的开头的位置(很难想有木有)OK,状态有了,方程想一想就出来了:设$num[i][j]$为数列 ...