使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目。今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法,该方法是由aka Yuhů发明的,这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法。下面来看看暴风彬彬曾经总结的笔记,大家有不同意见请多拍砖:

先来看看实例效果Demo

该CSS垂直居中的条件:

1.已有一个已定义高度的容器(如<div>)
2.内部有一个未知高度的对象(也许是后台动态生成的文本,放在另一个<div>中)
3.我想让内部的对象在容器内垂直居中。
4.不使用HTML的表格(table元素),也不使用Javascript。

该CSS垂直居中的方法:

最大的问题:IE浏览器的Bug。

  大部分浏览器能理解CSS中的display:table之类的表格方式声明,但IE7及其以下的旧版IE无法理解这个声明。

解决办法:让大部分能理解display:table声明的浏览器使用vertical-align属性达到垂直居中,让IE7及以下版本用自己理解高度的Bug来解决居中问题。

IE Bug: 

IE7及以下版本理解高度的Bug:如果a容器内有b对象,a容器并没有设置高度值,如果b对象有实际内容(如文字),那么就会将a的高度理解为与b相等。那么如果对b采取相对定位,b就会相对于在a中的原始位置移动(主要利用百分比高度)。

eg:a未定义高度,b的高度为100px,将b相对定位,并设top:-50%

在这种情况下:标准浏览器由于未知a的高度,所以b不动。而IE7及以下版本则会让b相对a的高度(其实等于b的高度)上移50%,也就是50px 。

如何仅让IE7及以下版本理解对它们的声明?

1.Pixy曾发明underscore hack,就是在每个CSS属性前加一个下划线”_”,这个hack是专门针对IE6及以下版本的,也就是说IE7无法理解。如:_position:absolute;  所以这种hack就PASS!
2.在属性前加”#”的声明正好可以仅让IE7及以下版本理解,而其它任何浏览器都无法理解这个”#”,所以”#”后的声明就会被其它浏览器忽略掉。OK~~就这个!

兼容性:

  目前为止兼容直到IE8.x的所有IE浏览器、Gecko核心浏览器(Mozilla,Firefox,Netscape 7)、Opera 7、Webkit核心浏览器(Safari及Google Chrome)。

代码:

CSS部分:

#outer {
       display:table;
       height:400px;
       #position:relative;
       overflow:hidden;
}
#middle {
       display:table-cell;
       vertical-align:middle;
       #position:absolute;
       #top:50%;

#inner {
       #position:relative;
       #top:-50%;
}

XHTML部分:

<div id=”outer”>
    <div id=”middle”>
        <div id=”inner”>
           <!–这里是要垂直居中的内容–>
        </div>
    </div>
</div>

预览效果Demo(在Demo源代码中附加了一些用于修饰的CSS声明,大家可以忽略)

经测试,该方法也适用于图片垂直居中,建议大家在使用的时候定义好outer层的宽度。

原载:彬Go
本文链接:http://blog.bingo929.com/css-vertical-center.html

使用CSS完美实现垂直居中的方法的更多相关文章

  1. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  2. css的div垂直居中的方法,百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  3. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. CSS元素水平垂直居中的方法

    1.  元素水平居中 1.1  设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...

  5. css中div垂直居中的方法。

    利用绝对定位实现的居中 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. CSS水平居中与垂直居中的方法

    一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...

  7. css实现水平-垂直居中的方法

    * 定宽居中: 1.absolute+负margin 2.absolute+margin:auto 3.absolute--calc 4.min-height:100vh + flex + margi ...

  8. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  9. 使用CSS使内容垂直居中的N中方法。

    使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时: ...

随机推荐

  1. Docker Registry服务启动过程浅析

    当我们pull一个registry镜像或者自己制作一个镜像之后,使用命令docker run -d -p 5000:5000 registry,就可以启动一个私有容器服务,那么究竟是怎么做到的呢? 首 ...

  2. [系统集成] 部署 mesos-exporter 和 prometheus 监控 mesos task

    前几天我在mesos平台上基于 cadvisor部署了 influxdb 和 grafana,用于监控 mesos 以及 docker app 运行信息,发现这套监控系统不太适合 mesos + do ...

  3. VS2010 无法计算HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MSBuild\ToolsVersions\14.0@VCTargetPath处的属性表达式

    VS2010打开.csproj工程文件报错,不能加载,错误信息如下: 无法计算HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MSBuild\ToolsVersions\1 ...

  4. Serif和Sans-serif字体的区别

    在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif和Serif,打字机体虽然也属于Sans Serif,但由于是等宽字体,所以另外独立出Monospace这一种类,例如在Web中,表示代 ...

  5. Visual Studio 2013 添加新项缺失[ADO.NET 实体数据模型]解决方法

    解决方法如下: 1).到 Visual Studio 2013 的安装包的目录:/packages/EFTools 中寻找如下文件 EFTools.msi; EFTools.cab,如图 将它们复制自 ...

  6. 【解决】SQL Server作业中Excel Application不能访问文件

    在通过SQL Server作业来实现定时任务时,出现如下错误: FullyQualifiedErrorId : ComMethodTargetInvocation使用“1”个参数调用“Add”时发生异 ...

  7. springmvc 接受特殊类型字段的处理方法

    springmvc接受前台传入的数据时如果该字段类型无法被封装(如Date),则会出现400 Bad Request错误,解决方法如下. 1.在需要处理的字段前加上注解: @DateTimeForma ...

  8. 一段比较有意思的代码——介绍system verilog中的新增幅值语句

    system verilog中新加了很多幅值语句,虽然都只适用于阻塞幅值,但是在某些场合中非常实用. 下面是一段有意思的代码,覆盖了一些用法. package definitions; typedef ...

  9. 统计在从1到n的正整数中1出现的次数

    问题: 给定一个十进制正整数N,写下从1开始,到N的所有整数,然后数一下其中出现的所有“1”的个数. 例如:N= 2,写下1,2.这样只出现了1个“1”. N= 12,我们会写下1, 2, 3, 4, ...

  10. C#编写WIN32系统托盘程序

    基本功能概述: 程序运行后驻留系统托盘,左键呼出,右键退出.后续可加右键菜单. 注册系统案件WIN+F10,呼出程序. 重写系统消息,最小化和关闭按钮隐藏程序 using System; using ...