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. Shannon entropy

    Shannon entropy is one of the most important metrics in information theory. Entropy measures the unc ...

  2. oc程序代码

    // //  main.m //  aa // //  Created by rcfwzx on 15/11/20. //  Copyright (c) 2015年 rcfwzx. All right ...

  3. cmd 打开gitshell

    C:\Users\Username\AppData\Local\GitHub\GitHub.appref-ms --open-shell

  4. valueOf() toString() typeof instanceof

    ******在chrome console中运行{a:1}.valueOf(); 报错:"SyntaxError: Unexpected token . ",这是由于{}被js引擎 ...

  5. redhat6.4安装storm集群-4节点

    0.搭建ftp服务器并建立yum源 1.在每个节点上安装java并设置环境变量 2.在三个节点上安装zookeeper 3.安装zeromq 过程中发现运行./configure时出现问题: conf ...

  6. JEECMS v8 发布，java 开源 CMS 系统

    JEECMSv8 是国内java开源CMS行业知名度最高.用户量最大的站群管理系统,支持栏目模型.内容模型交叉自定义.以及具备支付和财务结算的内容电商为一体:  对于不懂技术的用户来说,只要通过后台的 ...

  7. 转：Caused by: java.lang.NoSuchMethodError: org.apache.log4j.Category.log

    Caused by: java.lang.NoSuchMethodError: org.apache.log4j.Category.log出现的异常:java.lang.reflect.Invocat ...

  8. phalcon:跟踪sql语句

    在phalcon里有一个\Phalcon\Db\Profiler 类,这个类可以用来记录sql语句并计算消耗的时间.那么如何使用它呢? 手册里其实已经提供了方法,总结如下: 1.向$di里注册prof ...

  9. ubuntu14 + nginx + php

    ubuntu14 1.安装nginx sudo apt-get install nginx 安装之后的文件结构大致为: * 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/et ...

  10. M3: 发送邮件附件（2）

    本小节介绍如何通过邮件将生成的贺卡发送给朋友.使用到了EmailMessageAPI, 需要引入的命名空间为Windows.ApplicationModel.Email. 请确保完成了以前的章节. 在 ...