Found another solution:

Just add

position: relative;

top: 50%;

transform: translateY(-50%);

to the inner div.

Codepen: http://codepen.io/anon/pen/ZYprdb

div 居中的更多相关文章

  1. bootstrap之div居中

    bootstrap之div居中 偏移列 偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...

  2. 移动页面div居中效果代码

    在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...

  3. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  4. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  5. 关于div居中

    margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中

  6. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. HTML4如何让一个DIV居中对齐？float输入日志标题

    float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...

  8. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  9. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  10. DIV居中的经典方法

    1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...

随机推荐

  1. JDE 增加合计列

  2. 16 款最流行的 JavaScript 框架

    本文列举了16个当前最流行的JavaScript框架.在这个列表中,既包括jQuery和Mootools,也有Zepo移动JavaScript框架. 里面一定有你正在用的或想尝试用的JavaScrip ...

  3. linux ps 命令

    ps命令是用来查看系统运行的进程 -A 显示所有进程(等价于-e)(utility) -a 显示一个终端的所有进程,除了会话引线 -N 忽略选择. -d 显示所有进程,但省略所有的会话引线(utili ...

  4. Java 设计模式泛谈&装饰者模式和单例模式

    设计模式(Design Pattern) 1.是一套被反复使用.多人知晓的,经过分类编目 的 代码设计经验总结.使用设计模式是为了可重用代码,让代码更容易维护以及扩展. 2.简单的讲:所谓模式就是得到 ...

  5. POJ 3694 tarjan 桥+lca

    Network Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7298   Accepted: 2651 Descripti ...

  6. python leetcode 日记--Maximal Square--221

    题目: Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ...

  7. php匿名函数和闭包

    一,匿名函数 一个没有名字的函数,使用function定义 <?php $fun = function($a,$b) { return $a+$b; }; echo $fun(1,2);//输出 ...

  8. windowsAzure模拟器错误

    Failed to initialize Microsoft Azure storage emulator. Unable to open wait handle 无法初始化微软Azure存储模拟器. ...

  9. Redis持久化-数据丢失及解决(转载)

    本文转载自        Redis持久化-数据丢失及解决  感谢原作者 Redis的数据回写机制 Redis的数据回写机制分同步和异步两种, 同步回写即SAVE命令,主进程直接向磁盘回写数据.在数据 ...

  10. [转]设置Android手机以使用ARM Streamline进行性能分析（一）

    本博客第一次转载的文章,原文访问不到了,这篇是从google cache里挖出来的,为有需要的同学准备.原文地址     Posted by Fang Bao,(鲍方) 4 Comments 11 J ...