我们都知道，对于一行文本的垂直居中可以通过设置 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. 系统数据库--修改tempdb的位置

    use mastergoAlter database tempdb modify file (name = tempdev, filename = 'G:\db\tempdb.mdf')goAlter ...

  2. Windows store app[Part 2]:全新的File System与Uri不匹配的问题

    在Win 8 App的安全沙箱内,除了使用文件选取器FileOpenPicker外,没有其他办法调用某个盘符的数据. 全新的Storage命名空间,借鉴了IOS与Android的设计. 下面引用一个图 ...

  3. 【MVC】分布视图带参数

    1.调用 <!--底部菜单--> @Html.Action(, itemTypeId = , itemId = ViewBag.Id }) 2.定义 public class ItemPu ...

  4. 结构（struct）

    结构是程序员定义的数据类型,非常类似于类.都包含数据成员和函数成员. 区别:1.类是引用类型,而结构是值类型 2.结构是隐式密封的,也就是结构不能被派生. 结构类型和所有值类型一样,含有自己的数据.需 ...

  5. 全局匹配KMP算法

    KMP算法是通过分析模式字符串,预先计算每个位置发生不匹配的时候,所需GOTO的下一个比较位置,整理出来一个next数组,然后在上面的算法中使用. 本全局匹配KMP算法针对串的堆式存储数据结构 # d ...

  6. 阿里云PolarDB及其共享存储PolarFS技术实现分析（上）

    PolarDB是阿里云基于MySQL推出的云原生数据库(Cloud Native Database)产品,通过将数据库中计算和存储分离,多个计算节点访问同一份存储数据的方式来解决目前MySQL数据库存 ...

  7. HAOI2010 订货

    题目链接:戳我 费用流. 将每天分成早上和晚上两个点.源点向早上连容量INF,费用为进货量的边.早上向汇点连容量供货量,费用0.早上向晚上连容量为S,费用为0的边.晚上向第二天早上连容量S,费用0.之 ...

  8. “全栈2019”Java第二十五章：流程控制语句中循环语句while

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

  9. Servlet实现Cookie读写

    前言 程序员老婆让程序员去外面买东西,说,老公,你出去买一笼包子吧,遇到卖西瓜的就买一个.老公高兴的出去了,一会儿带着一个包子回来了,老婆很是郁闷问,怎么只买了一个包子,程序员说:因为我看到卖西瓜的了 ...

  10. [转] 翻译130+VIM基本命令

    基础 :e filename 在编辑器中打开一个文件 :w 保存文件 :q 退出vim :q! 退出但不保存 :x 写文件(如果有做修改)并退出 :sav filename 保存为 . 在正常模式中重 ...