本文转自：http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。

就以一个404页面为例，看如何让一张图片相对于整个页面居中，如下图：

这是一个404页面，里面就只有一张图片，点击图片可以回到首页，而且这个图片是相对于整个页面居中的，无论是水平还是垂直（PS：这可算是我做404页面最为习惯的一种懒人做法了，越简单越好，要想好看的话，直接用photoshop做一张好看一点的图片就好了～）。

接下来看一下它的html代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title>404页面</title>  </head>  <body>      <div class="wall">          <a href="index.html"><img class="img404" src="data:images/404.jpg" alt="404页面" /></a>      </div>  </body>  </html>

代码很简单，就一个class="wall"的div标签，一个a标签，一个class=“img404”的img标签。

接下来就是写css了，先让class="wall"的div的宽和高都为100%，以填充整个页面，CSS如下：

 <style type="text/css">         body{ margin:0; background:#333; _height:100%;}         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}         .img404{ border:0;width:700px;} </style>

以上CSS里面值得一说的恐怕就是为什么要用绝对定位（position:absolute）以及_height:100%这个样式了；我试了很多 方法，结果我只能用绝对定位才能让它的height:100%生效，当然固定定位（position:fixed）也是可以的，可是IE6不支 持；_height:100%是为了兼容IE6，让class="wall"的div在IE6里也能高度为100%。如果想验证一下 class="wall"的div现在是否已经填充了整个页面，不妨在.wall里面设一个背景色就可以知道了，这里我就不做实验了。

目前整页的代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title>404页面</title>      <style type="text/css">         body{ margin:0; background:#333; _height:100%;}         .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}         .img404{ border:0; width:700px;} </style>  </head>  <body>      <div class="wall">          <a href="index.html"><img class="img404" src="data:images/404.jpg" alt="404页面" /></a>      </div>  </body>  </html>

效果如下：

接下来就利用vertical-align:middle来实现垂直居中了，因为class="wall"的div填充了整个页面，所以只要让图片 在class="wall"的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理，一个是垂 直居中，一个是水平居中，只要给class="wall"的div加上一个vertical-align:middle就能让图片垂直居中，结果一点效果 也没有。事实上vertical-align与text-align完全不一样，给class="wall"的div加上一个text- align:center的话，毫无疑问是可以让里面的img水平居中，但vertical-align却不能这样子用。

先看一下W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在 表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

必须承认这句话我看了很久才看懂说的是神马意思，我的理解是它有两种用法：

第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个 vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对 齐，如果给一个vertical-align:top就会顶部对齐。

第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元 素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

说到这里，思路就清晰了（PS：理应知道vertical-align可以设middle,top,bottom等等，甚至可以设置具体的值或百分比，如果想知道会有怎样的效果，可以自己实验一下，这里就不多说了。）。

接下来回到这篇文章的主题，现在我要让class="img404"的img在class="wall"的div里面垂直居中，我可以在div里面 加一个span空标签，把它的高度设为100%，再给它一个vertical-align:middle样式，同样地给img一个vertical- align:middle样式，那么img就可以在div里面垂直居中了。如图：

按照这个思路，完整的页面代码就出来了：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      <html xmlns="http://www.w3.org/1999/xhtml">   <head>       <title>404页面</title>       <style type="text/css">          body{ margin:0; background:#333; _height:100%;}          .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;}          .img404{ border:0; width:700px; vertical-align:middle;}          .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}  </style>   </head>   <body>       <div class="wall">          <span class="verticalAlign"></span>          <a href="index.html"><img class="img404" src="data:images/404.jpg" alt="404页面" /></a>       </div>   </body>   </html>

以上的CSS里面值得一提的是.verticalAlign，加一个display:inline-block是为了触发它的layout，以让本 来没有layout的span可以设置宽和高，margin-left:-1px是为了让span左移一个像素，而令img在水平方向上回到正中位置；另 外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。

最终效果如下：

（PS：以上仅是个人理解，如有不同意见，或以上说法有错漏，欢迎指出。）

同样的原理可以实现文字居中，完整代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title>无标题页</title>      <style type="text/css">         .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;}         .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}         .textSpan{vertical-align:middle;} </style>  </head>  <body>      <div class="wrap">          <span class="verticalAlign"></span>          <span class="textSpan">文字居中</span>      </div>  </body>  </html>

效果如下：

 
 

[转]利用vertical-align:middle实现在整个页面居中的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  3. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  4. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  5. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  6. css 居中，中央

    在我的技巧里,有4中居中中央的方法: 1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x; 这是绝对定位的方法,通过算法移动,坏处就是必 ...

  7. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  8. Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标

    Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...

  9. 利用ajax做的柱状图，线性统计图，饼状图

    柱状图,两个不同类型的数据 以下是html页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

随机推荐

  1. mount失败

    又一次遇到mount失败,提示文件系统类型错误.选项错误.有坏超级块等.之前是在ubuntu 14.04 lts desktop上挂载windows下共享文件夹遇到的.这次具体的环境如下:CentOS ...

  2. Glibc辅助运行库 (C RunTime Library): crt0.o,crt1.o,crti.o crtn.o,crtbegin.o crtend.o

    crt1.o, crti.o, crtbegin.o, crtend.o, crtn.o 等目标文件和daemon.o(由我们自己的C程序文件产生)链接成一个执行文件.前面这5个目标文件的作用分别是启 ...

  3. Java设计模式系列之单例模式

    单例模式的定义 一个类有且仅有一个实例,并且自行实例化向整个系统提供.比如,多程序读取一个配置文件时,建议配置文件时,建议配置文件封装成对象.会方便操作其中的数据,又要保证多个程序读到的是同一个配置文 ...

  4. POJ 2185 Milking Grid（KMP）

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 4738   Accepted: 1978 Desc ...

  5. 一个word合并项目的分布式架构设计

    一个word合并项目的分布式架构设计 项目背景与问题起源 我们要给一个客户做word生成报告以及报告合并的工作,要合并的报告非常多,而且每个报告也比较大,一个多的报告大概有200页以上.我们用c#操作 ...

  6. poj 3041 Asteroids(最小点覆盖)

    http://poj.org/problem?id=3041 Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions ...

  7. 通用FASTREPORT打印模块及接口方法

    untFastReport.dfm文件: object frmFastReport: TfrmFastReport OldCreateOrder = False Height = 405 Width ...

  8. FPGA静态时序分析——IO口时序（Input Delay /output Delay）

    1.1  概述 在高速系统中FPGA时序约束不止包括内部时钟约束,还应包括完整的IO时序约束和时序例外约束才能实现PCB板级的时序收敛.因此,FPGA时序约束中IO口时序约束也是一个重点.只有约束正确 ...

  9. flex 弹性合模型

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  10. 超轻量级spring模板方案

    最近从事的工作是web方面的,主要j2ee,spring jsp这些内容,由于刚入门,很多的技术都不了解.所谓初生牛犊不怕虎,刚入门,各种不顺手,比如写jsp,总是重复很多的代码,各种不爽,然后就去看 ...