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. CSS预处理器(SASS和LESS)

    Sass框架应用Sass简介 Sass又名SCSS,是CSS预处理器之一,它能让你更好更轻松的工作.Sass官网是这样描述Sass的:**Sass是一门高于CSS的元语言,能用来清晰的.结构化地描述文 ...

  2. ubuntu安装软件-笔记

    手动安装过程 下载 - 配置文件 常用命令: sudo  dpkg -i ******.deb 问题&解决思路 问题1:依赖项 - 缺少某一个依赖包 解决尝试: 1 . sudo apt-ge ...

  3. See Elevator Run Floors

    “在我短暂的电梯作业中我发现,架构的优化能力是有限的.越是工于优化算法…越是会被自己的架构所制约….想要更好的优化,唯有超越架构………" 零.基础 优化建立在架构之上,这句话莫得问题,也莫得 ...

  4. CF1096G Lucky Tickets 快速幂套FFT

    \(\color{#0066ff}{ 题目描述 }\) 一个\(n\)位数,每位可以是给出的\(k\)个数码中的一个数,可以有前导\(0\),输出前\(n/2\)位之和与后\(n/2\)位之和相等的方 ...

  5. QueryTask,FindTask,IdentifyTask三种查询的区别

    1:QueryTask是一个进行空间和属性查询的功能类,它可以在某个地图服务的某个子图层内进行查询,顺便需要提一下的是,QueryTask进行查询的地图服务并不必项加载到Map中进行显示.QueryT ...

  6. IT网址大全

    图像处理 [素材]   在线作图 [素材]   思缘设计论坛 [素材]   ps联盟 [素材]   ps学习网 [素材]   ps教程论坛 [素材]   ps爱好者 [素材]   46ps [素材] ...

  7. svg path 路径

    许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...

  8. CodeForces - 124B-Permutations(DFS)

    You are given n k-digit integers. You have to rearrange the digits in the integers so that the diffe ...

  9. Hie with the Pie(状压DP+可以经过多次相同的点要全部走过的最短回路)

    大意:一个人要送n份货,给出一个矩阵,表示任意两个点间的直接路径长度,求从起点0送完这n份货(到达指定的n个地点)再回到起点0的最短时间.经过任意顶点的次数不限. 分析:既然是可以过多个点,那我们可以 ...

  10. day_12 内置函数

      1. 内置函数 1.双下划线方法的使用 1.原来it=lst.__iter__() print(it__next__()) 2.现在it=iter(list) print(next(it)) 2. ...