先弄懂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. Javascript高级程序设计读书笔记（第二章）

    第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...

  2. 操作Action

    Action就是Controller的一个方法 包含对应请求的最终结果 Action里代码从Model层拿到数据 最后把数据结果Actionresult 返回用户

  3. javascript-Blob文件对象

    一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本 ...

  4. First 5 minutes of SQLite

    What is SQLite? SQLite is light-weight RDBMS, it is use the file system rather than the C/S client, ...

  5. iOS的Bundle资源束制作

    在静态库的制作中,很多时候我们的静态库也是带着文件,图片和多媒体资源的. 若只是直接加入到项目中也是可以,但是,考虑到方便管理(方便插件使用者的管理),我们希望把插件的资源文件打成一个包来管理. 当然 ...

  6. destoon实现商铺管理主页设置增加新菜单的方法

    1.打开/lang/zh-cn/home.inc.php,找到9,10行替换如下: $HMENU = $DMENU = array('公司介绍', '供应产品', '采购清单', '新闻中心', '荣 ...

  7. python中 and 和 or 运算的核心思想 ——— 短路逻辑

    python中 and 和 or 运算的核心思想 --- 短路逻辑 1. 包含一个逻辑运算符 首先从基本的概念着手,python中哪些对象会被当成 False 呢?而哪些又是 True 呢? 在Pyt ...

  8. head直接复制的

    <script type="application/x-javascript"> addEventListener("load", function ...

  9. [原创]零基础R语言教程---第二课---R语言入门

    这节教程简单描述了R语言中常用的数据类型, 向量,字符串,矩阵,列表,数据框,以及附带了一个小例子 对于这节课所附带的例子需要做下列补充: 1.这个例子面向于对整列的数据进行预测 2.如果你需要求单行 ...

  10. mysql命令行的基本用法

    基础介绍:1.在linux下使用下列命令,请确认mysql的bin目录是否已经加入到PATH路径中,或者是已经进入到mysql安装路径下的bin目录查看PATHshell> echo $PATH ...