一、固定高度的容器，单行文本垂直居中

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>单行文本垂直居中</title>
  6.          <style>
  7.          div {
  8.              width:200px;
  9.              height:80px;
  10.              background-color:cyan;
  11.              line-height:80px;
  12.          }
  13.          </style>
  14.      </head>
  15.      <body>
  16.          <div>
  17.              <p>单行文本垂直居中</p>
  18.          </div>
  19.      </body>
  20.  </html>

页面效果：

二、固定高度的容器，图像水平垂直居中

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>图像水平垂直居中</title>
  6.          <style>
  7.              div {
  8.                  width:350px;
  9.                  height:200px;
  10.                  background-color: cyan;
  11.                  text-align: center;
  12.                  line-height: 200px;
  13.              }
  14.  
  15.              img {
  16.                  vertical-align: middle;
  17.              }
  18.          </style>
  19.      </head>
  20.      <body>
  21.          <div>
  22.              <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"
  23.              alt="A picture" style="width:175px;height:100px" />
  24.          </div>
  25.      </body>
  26.  </html>

页面效果：

其实现原理，我们可以有两种方式解读。

第一种方式，先让隐藏文本节点垂直居中，然后图像与它垂直居中对齐。

（关于“隐藏文本节点”这个概念，出自张旭鑫大大，感兴趣的朋友可以去查看作者的文章；本博下一篇博文“CSS line-height与vertical-align:baseline”中也有相关说明。）

下面来看这段代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>图像水平垂直居中</title>
  6.          <style>
  7.              div {
  8.                  width:350px;
  9.                  height:200px;
  10.                  background-color: cyan;
  11.                  text-align: center;
  12.                  line-height: 200px;
  13.              }
  14.  
  15.              span {
  16.                  background-color: red;
  17.              }
  18.          </style>
  19.      </head>
  20.      <body>
  21.          <div>
  22.              <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"
  23.              alt="A picture" style="width:175px;height:100px" />
  24.              <span>xxx</span>
  25.          </div>
  26.      </body>
  27.  </html>

其页面效果为：

我们知道<img>元素后面有一个隐藏文本节点，在这里，我们将它显现出来，xxx；

根据div {height:200px; line-height:200px;} 的设置，xxx作为div中的单行文本被垂直居中了；

此时vertical-align为默认值baseline，所以图像的底边与文本的基线对齐。

如果我们进一步设置img {vertical-align:middle;}，就能得到图像垂直居中；如图：

然后我们在html中删掉帮助我们理解的本来是隐藏的 xxx ，就能得到图像水平垂直居中的结果。

第二种方式，先让图像与隐藏文本节点垂直居中对齐，再逐渐扩大行高，由行高撑开隐藏文本的高度，直到行高等于容器的高度，实现垂直居中。

请看如下代码：

  1.  <!DOCTYPE html>
  2.   <html>
  3.       <head>
  4.           <meta charset="utf-8">
  5.           <title>图像水平垂直居中</title>
  6.           <style>
  7.               div {
  8.                   width:350px;
  9.                   height:200px;
  10.                   line-height: normal;
  11.                   background-color: cyan;
  12.                   text-align: center;
  13.               }
  14.  
  15.               img {
  16.                   vertical-align:middle;
  17.               }
  18.  
  19.               span {
  20.                   display: inline-block;
  21.                   background-color: red;
  22.               }
  23.           </style>
  24.       </head>
  25.       <body>
  26.           <div>
  27.               <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
  28.               <span>xxx</span>
  29.           </div>
  30.       </body>
  31.   </html>

其初始页面效果：

上图为line-height:normal时的页面效果，下面我们逐渐增大line-height的值，来看看页面的变化。

（我们将span元素设置为display:inline-block，这样就能直观地看到line-height的变化过程。）

当line-height的值为80px时，其页面效果：

因为图像的height值为100px；所以当line-height的值小于100px时，图像是不会移动的。

当line-height的值为150px时，其页面效果：

当line-height的值为200px时，其页面效果：

此时line-height与height的值相等，这就是我们想要的效果。

同时，这也是line-height等于height时单行文本能够垂直居中的直观体现。

不过我们还可以继续增加line-height的值，看看有什么变化。

当line-height的值为400px时，其页面效果：

由于容器的高度是200px，而我们的文本行高是400px；从图像上看出，以xxx内容区的中点为界，上下的高度都是200px。

也就是说，行高被内容区的中点均分。

从这个角度来看待行高，就很容易理解单行文本有行高。

这也就能解释为什么height与line-height相等时文本会垂直居中；比如height为200px，line-height为200px，因为行高被内容区的中点均分，以内容区中点为界，上面100px，下面100px，文本自然就在容器的中间。

但是要注意，只是文本内容区垂直居中了，内容区的中点与文本的中点并不是一个点，文本只是近似垂直居中。

而vertical-align:middle，只是让图像的中点与文本的中点对齐，所以，图像也只是近似居中。

那么，怎么才能做到图像完美垂直居中呢？

如果只有图像，没有文本，设置font-size值为0，内容区的中点与文本的中点重合在一起，自然就能完美垂直居中。

如果既有图像，又有文本，把图像和文本都设置vertical-align:middle，让它们相互居中对齐，图像的中点就会与内容区的中点对齐，从而完美垂直居中。

然而，文本该怎么完美垂直居中呢？我也不知道。。。

三、高度不固定的容器，图像水平垂直居中

根据第二种解释，在高度不固定的容器中，让图像与隐藏文本节点垂直居中对齐，再逐渐扩大行高，由行高撑开隐藏文本的高度，随着行高的增加，当行高大于图像的高度时，就能实现图像在不定高容器中的垂直居中。

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>图像水平垂直居中</title>
  6.          <style>
  7.              div {
  8.                  background-color: cyan;
  9.                  text-align: center;
  10.                  line-height: normal;
  11.              }
  12.  
  13.              img {
  14.                  vertical-align:middle;
  15.              }
  16.          </style>
  17.      </head>
  18.      <body>
  19.          <div>
  20.              <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg"
  21.              alt="A picture" style="width:175px;height:100px">
  22.          </div>
  23.      </body>
  24.  </html>

页面效果：

然后我们改变line-height的值为150px，由隐藏文本节点撑开父容器的高度，得到如下效果：

四、多行文本水平垂直居中

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>多行文本水平垂直居中</title>
  6.          <style>
  7.              div.box {
  8.                  width:500px;
  9.                  height:300px;
  10.                  background-color: cyan;
  11.                  text-align: center;
  12.                  line-height: 300px;
  13.              }
  14.  
  15.              div.container {
  16.                  display:inline-block;
  17.                  vertical-align: middle;
  18.                  line-height: 1.5;
  19.                  width: 380px;
  20.                  text-align: left;
  21.              }
  22.          </style>
  23.      </head>
  24.      <body>
  25.          <div class="box">
  26.              <div class="container">
  27.                  <ul>
  28.                      <li>多行文本水平垂直居中的原理与图像一样;</li>
  29.                      <li>将文本用一个容器封装起来，把它当成图像看待;</li>
  30.                      <li>设置display属性值为inline-block;</li>
  31.                      <li>设置line-height属性值;</li>
  32.                      <li>设置width属性值;</li>
  33.                      <li>设置text-align属性值。</li>
  34.                  </ul>
  35.              </div>
  36.          </div>
  37.      </body>
  38.  </html>

页面效果：

总结：

关于垂直居中，关键是让容器的height值与line-height值相等！

CSS line-height应用的更多相关文章

  1. [css] line boxes

    原文链接:http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85 ...

  2. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  3. css & auto height & overflow: hidden;

    css & auto height & overflow: hidden; {overflow: hidden; height: 100%;} is the panacea! {溢出: ...

  4. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  5. 构建前端第4篇之---使用css用法 height

    张艳涛 写于2021-1-20 height: 100%; What:  html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...

  6. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  7. CSS——对height和line-height的理解

    最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...

  8. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

  9. css之height: 100%的有效场景

    在css的日常应用中,经常会遇到想要通过 height: 100%来达到使子盒子与父盒子高度一样的目的,但是偶尔明明设置了height: 100%,但是却没有达到想要的结果,这次我们就一起探索一下,什 ...

  10. css width height

    css 中body 的默认宽度是100%,但是默认高度为0px

随机推荐

  1. mysql实现消息队列

    mysql之消息队列   消息队列:在消息的传输过程中保存消息的容器. 消息队列管理器在将消息从它的源中继到它的目标时充当中间人.队列的主要目的是提供路由并保证消息的传递:如果发送消息时接收者不可用, ...

  2. django-rest-swagger对API接口注释

    Swagger是一个API开发者的工具框架,用于生成.描述.调用和可视化RESTful风格的Web服务.总体目标是使客户端和文件系统服务器以同样的速度来更新,方法,参数和模型紧密集成到服务器端的代码中 ...

  3. 反Nim博弈

    原文地址:https://blog.csdn.net/xuejye/article/details/78975900 在尼姆博奕中取完最后一颗糖的人为赢家,而取到最后一颗糖为输家的就是反尼姆博奕.这道 ...

  4. es各类SearchType的意思

    元素 含义 QUERY_THEN_FETCH 查询是针对所有的块执行的,但返回的是足够的信息,而不是文档内容(Document).结果会被排序和分级,基于此,只有相关的块的文档对象会被返回.由于被取到 ...

  5. BZOJ3834 [Poi2014]Solar Panels 【数论】

    题目链接 BZOJ3834 题解 容易想到对于\(gcd(x,y) = D\),\(d\)的倍数一定存在于两个区间中 换言之 \[\lfloor \frac{a - 1}{D} \rfloor < ...

  6. Java之链表实现栈结构

    package com.wzlove.stack; import java.util.Iterator; import java.util.NoSuchElementException; /** * ...

  7. bzoj5016 一个简单的询问

    这种不可直接做的问题 数据范围又很小 考虑莫队 但是,l1,l2,r1,r2四维? 考虑把询问二维差分! f(a,b)表示,询问[1,a],[1, b]的答案 所以,ans(l1,r1,l2,y2)= ...

  8. D. Mahmoud and Ehab and the binary string Codeforces Round #435 (Div. 2)

    http://codeforces.com/contest/862/problem/D 交互题 fflush(stdout) 调试: 先行给出结果,函数代替输入 #include <cstdio ...

  9. Python高手之路【四】python函数装饰器，迭代器

    def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...

  10. [Spark]-Spark发展历程与基本概念

    Hadoop十年 找了一张Hadoop十年的生态发展图: Spark概况: Apache Spark是一个开源簇运算框架,最初是由加州大学柏克莱分校AMPLab所开发.相对于Hadoop的MapRed ...