我们都知道，对于一行文本的垂直居中可以通过设置 height 与 line-height 值相等来实现。

那么对于两个嵌套的div ，或者一个div中的多行文本，怎么让被包含的部分实现垂直居中呢？显然，通过 line-height 没法实现。

其实，实现原理就是用外层div的高度减去内层 div 的高度，除以2之后，给内层div设置margin-top值就可以了。

假如页面上内层div的高度是由内容撑开的，这时就需要用js了。通过动态获取内层div的高度，再依照上述原理去实现。

垂直居中问题不只有 line-height 可以解决，还有一个哥们叫 margin-top的更多相关文章

  1. 意外地解决了一个WPF布局问题

    原文:意外地解决了一个WPF布局问题 今天做了一个小测试,意外地将之前的一个困扰解决了,原问题见<WPF疑难杂症会诊>中的“怎么才能禁止内容撑大容器?” 以前我是在外侧嵌套Canvas容器 ...

  2. 解决由于一个软件限制策略的阻止，windows无法运行此程序cmd.reg

    解决由于一个软件限制策略的阻止,windows无法运行此程序cmd.reg Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFT ...

  3. 花了5天时间，终于解决了一个bug，心情非常愉快，憋了这么久，不吐不快

    http://www.cnweblog.com/fly2700/archive/2011/12/06/318916.html (转载) 花了5天时间,终于解决了一个bug,心情非常愉快,憋了这么久,不 ...

  4. 安卓移动端line-height垂直居中出现偏移的原因，及解决方法

    目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的.出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的. 左图中的字号是12px,右图中的 ...

  5. IE中出现 "Stack overflow at line" 错误的解决方法

    在做网站时遇到一个问题,网站用的以前的程序,在没有改过什么程序的情况下,页面总是提示Stack overflow at line 0的错误,而以前的网站都正常没有出现过这种情况,在网上找了一下解决办法 ...

  6. Multiple markers at this line @Override的解决方法

    Multiple markers at this line - implements java.awt.event.ActionListener.actionPerformed - The metho ...

  7. 报错compile_str() flow.php on line 375的解决方法

    flow.php line 375,flow.php  找到375行: * 保存收货人信息 */ $consignee = array( 'address_id' => empty($_POST ...

  8. 去除外显子低质量reads时弹出错误“Invalid quality score value (char '#' ord 35 quality value -29) on line 4”和“Invalid quality score value (char '.' ord 46 quality value -18) on line 12”的解决方法

    楼主跑以下程序时分别弹出了“fastq_quality_filter: Invalid quality score value (char '.' ord 46 quality value -18) ...

  9. PHP Warning: Module 'modulename' already loaded in Unknown on line 0 的解决方法

    今天无间断服务加载php-fpm时,爆出了一个错误:PHP Warning:  Module 'xhprof' already loaded in Unknown on line 0 <br / ...

随机推荐

  1. eclipse开发hadoop2.2.0程序

    在 Eclipse 环境下可以方便地进行 Hadoop 并行程序的开发和调试.前提是安装hadoop-eclipse-plugin,利用这个 plugin, 可以在 Eclipse 中创建一个 Had ...

  2. [IE bug] ajax请求 304解决方案

    最近和筒子们做了个校园电台,进去之后会自动播放歌曲,每首放完了的话会随机get新的json,然后再播放下一首 整体做成了命令行的风格,在最后输入next,start等命令来操作,5+M/s校园网+W级 ...

  3. MVC的 url 传递参数无效

    有些符号(例如“=”)在URL中 直接传递是无效的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.下表中列出了一些URL特殊符号及编码       十六进制值 1. + URL 中+号表 ...

  4. system idle process

    偶然发现windows环境任务管理其中存在进程 system idle process,cpu占用极大但内存占用很小.google了一下,保存下结果 system idle process :系统空闲 ...

  5. “全栈2019”Java第十八章：一元运算符

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. java 去最后一位字符 str.substring(0,str.length()-1)

    String str = " 中国, 美国 , 意大利 ";String[] arr = str.split(",");for(int i1 =0;i1< ...

  7. TCP和UDP的最完整的区别【转】

    来源:https://blog.csdn.net/li_ning_/article/details/52117463 TCP UDPTCP与UDP基本区别  1.基于连接与无连接  2.TCP要求系统 ...

  8. linux开始之旅-01 linux需要知道的这几位

    首先介绍几个人,没有这几个人就没有linux. 第一个:肯·汤普逊(左)和丹尼斯·里奇(右)  ------ C语言之父   ------学计算机的人都应该认识吧,计算机学院楼道里面都会有这两位. 美 ...

  9. POJ1475 Pushing Boxes（双搜索）

    POJ1475 Pushing Boxes  推箱子,#表示墙,B表示箱子的起点,T表示箱子的目标位置,S表示人的起点 本题没有 Special Judge,多解时,先最小化箱子被推动的次数,再最小化 ...

  10. 高阶篇：4.2.4）DFMEA严重度S(+分类e)、频度O、探测度D、风险优先系数RPN

    本章目的:填写严重度S(+分类).频度O.探测度D,判定风险优先系数RPN. 1.前言 实施阶段中, 要求.潜在失效模式.潜在失效后果.潜在失效原因和现有设计控制措施等 5 个为基础项, 它们的分析是 ...