先弄懂after伪类的用法，就可以很容易理解了。

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pic_box{width:400px; height:400px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}

.pic_box .div{vertical-align:middle;width: 100px;height: 100px;background-color: blue;display: inline-block;}

.pic_box:after{display:inline-block; width:0;height:100%; content:"111111111111"; vertical-align:middle; overflow:hidden;}
</style>
</head>
<body>

<div class="pic_box">

<div class="div"></div>

</div>

</body>
</html>

效果图

不用position，让div垂直居中的更多相关文章

  1. css的div垂直居中的方法，百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  2. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  3. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  5. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  8. div垂直居中的问题

    工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...

  9. 由12306出错想到的div垂直居中的问题

    今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了 看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下1 ...

  10. div垂直居中的方法（转）

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  2. Rect

    判断给定的点是否被一个CGRect包含,可以用CGRectContainsPoint函数   BOOL contains = CGRectContainsPoint(CGRect rect, CGPo ...

  3. hdu 1263 水果

    Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~ Joe经营着一个不大的水果店.他认为生存之道就是经营最受顾客欢迎的水果.现在他想要一份水果销售情况的明细表,这样J ...

  4. Cocos2d-x 3.0 场景切换

    场景切换要用到导演类Director,一般有两种方式,大多数是用替换场景(replaceScene),也可以用进栈(pushScene)出栈(popScene)的方式进行场景的替换. 场景切换代码: ...

  5. Floyd最小环

    本文转自这里 最小环:从一个点出发,经过一条简单路径回到起点成为环.图的最小环就是所有环中长度最小的. 怎样求最小环呢? 1传统的解决方法(dijkstra):        任意一个最小环环的权值, ...

  6. [Leetcode] Merge Sorted Array (C++)

    我在Github上新建了一个解答Leetcode问题的Project, 大家可以参考, 目前是Java 为主,里面有leetcode上的题目,解答,还有一些基本的单元测试,方便大家起步. 题目: Gi ...

  7. unable to find valid certification path to requested target

    Error : javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu ...

  8. Android的init过程详解（一）（转）

    本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 本文及后续几篇文章将对Android的初始化(init)过程进行详细地.剥丝抽茧式地分析,并且在其中穿插了大量的知识,希望 ...

  9. Absolute sort

    Absolute sort Let's try some sorting. Here is an array with the specific rules. The array (a tuple) ...

  10. 记一次 java程序优化

    优化原因 环境中部署两个程序: web应用 tomcat   10G(webservice服务端,前端web服务) java应用               5G(webservice客户端,sock ...