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. 乱谈zip、rar文件格式

    作者:马健邮箱:stronghorse_mj@hotmail.com发布:2006.11.21最近更新:2006.11.25 目录一.目录表(TOC)与分卷(Volume)二.固实(solid)压缩方 ...

  2. docker常用命令行集锦

    对工作中用到的docker命令行进行一个汇总,方便以后的命令行查询,同时也为了加强记忆,会把工作中用到的命令,持续更新上 1.查看私有仓库都有哪些镜像 curl -X GET http://10.27 ...

  3. JAVA学习第三篇Boolean

    Boolean是布尔值. 布尔值只有两个值:真和假.写作:true false. 那么如何使用呢? 最简单的用法: public class demo{ public static void main ...

  4. Django之博客系统:增加标签

    一般在发表博客后会给每个帖子加上一个标签.类似帖子关键字的功能.在这一章中来看下如何给博客添加标签功能(tagging) 添加标签需要集成第三方的Django标签应用来完成这个功能.django-ta ...

  5. GET/POST/g和钩子函数(hook)

    GET请求和POST请求: 1. get请求: * 使用场景:如果只对服务器获取数据,并没有对服务器产生任何影响,那么这时候使用get请求. * 传参:get请求传参是放在url中,并且是通过`?`的 ...

  6. JAVA进阶----ThreadPoolExecutor机制(转)

    http://825635381.iteye.com/blog/2184680 ThreadPoolExecutor机制 一.概述 1.ThreadPoolExecutor作为java.util.co ...

  7. k8s标签

    一.标签是什么 标签是k8s特色的管理方式,便于分类管理资源对象. 一个标签可以对应多个资源,一个资源也可以有多个标签,它们是多对多的关系. 一个资源拥有多个标签,可以实现不同维度的管理. 可以使用标 ...

  8. node mysql问题:Client does not support authentication protocol requested by server; consider upgrading MySQL client!

    node后台 mysql处理模块(版本:2.16.0) 执行connect方法时报错: Client does not support authentication protocol requeste ...

  9. kuangbin专题十六 KMP&&扩展KMP HDU2609 How many (最小字符串表示法)

    Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell me How man ...

  10. git ignore文件

    创建.gitignore文件来设置git要忽略的文件模式: 官方文件列列表:https://github.com/github/gitignore 1. 所有空行或者以 # 开头的行都会被 Git 忽 ...