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. iOS开发UI篇—IOS开发中Xcode的一些使用技巧

    iOS开发UI篇—IOS开发中Xcode的一些使用技巧 一.快捷键的使用 经常用到的快捷键如下: 新建 shift + cmd + n     新建项目 cmd + n             新建文 ...

  2. iOS开发拓展篇—音频处理（音乐播放器6）

    iOS开发拓展篇—音频处理(音乐播放器6) 一.图片处理 说明: Aspect表示按照原来的宽高比进行缩放. Aspectfit表示按照原来的宽高比缩放,要求看到全部图片,后果是不能完全覆盖窗口,会留 ...

  3. Web开发学习笔记

    EnumUtils.isValidEnum(JnRouteProViewStateEnum.class, status) : 判断 status是否在 枚举集合中. MapUtils.isNotEmp ...

  4. 图表控件== 百度 echarts的入门学习

    花了3天的时间 去学习跟试用之前两款的图表控件 hightcharts(商业,人性化,新手非常方便试用,图表少了点) 跟chartjs==>搭配vue更好 控件,整体而言都还可以. http:/ ...

  5. Linux提供两个格式化错误信息的函数

    #include “stdio.h” Void perror(__const char *__s); 其中__s是出现错误的地方,函数向标准错误输出设备输出如下:s:错误的详细信息. Eg.perro ...

  6. iOS ShareSDK 使用

    流量精灵软件中,也在大部分地方使用到了shareSDK 这个三方开源库.具体的有两种需求 a.弹出所有分享模块 b.只弹出指定的平台:如微信朋友圈和QQ . 配置方法,三方库中也很详细,这里我只有写出 ...

  7. This tag and its children can be replaced by one <TextView/> and a compound drawable

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  8. 标准IO的简单应用，动静态库，读取系统时间并打印，模拟ls -l功能

    2015.2.27星期五,小雨 标准IO实现的复制功能: #include <stdio.h>#include <errno.h> #define N 64 int main( ...

  9. windows环境下XAMPP安装、多域名多端口配置、与python环境并存

    一.去xampp官网下载最新版本的安装包,安装一般软件的安装步骤,一直下一步,不过如果你想安装到指定目录中的话,在选择安装位置的时候设置想要安装的位置. 二.我们在工作中经常遇到同时调试多个网站的情况 ...

  10. WampServe修改默认网站目录的方法(转)

    1wamp简介 WampServe集成了Apache.MySQL.PHP.phpmyadmin,支持Apache的mod_rewrite,PHP扩展.Apache模块只需要在菜单“开启/关闭”上点点就 ...