先弄懂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. (转) 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)

    打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空.参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explo ...

  2. VS2010 ReportViewer导出文件下载保存不能识别文件类型

    今天测试项目时,突然发现导出报表下载保存的保存,不能识别文件的类型,文件名称为:.xls[3] 检查代码发现在指定报表路径时多了一个方法: ReportViewer1.LocalReport.Load ...

  3. 点击推送消息跳转处理（iOS）

    当用户点击收到的推送消息时候,我希望打开APP,并且跳转到对应的界面,这就需要在AppDelegate里面对代理方法进行处理. 当用户点击推送消息打开APP的时候会调用 - (BOOL)applica ...

  4. UIScrollView的属性

    属性 作用 CGPoint contentOffSet 监控目前滚动的位置 CGSize contentSize 滚动范围的大小 UIEdgeInsets contentInset 视图在scroll ...

  5. 在shell中运行以不同方式运行脚本

    在shell当中,可以有3中方式运行脚本: 1 . ./script_name 或者source ./script_name 2 直接./script_name 3 ./script_name &am ...

  6. 各邮箱服务器地址及端口<转>

    gmail(google.com) POP3服务器地址:pop.gmail.com(SSL启用端口:995) SMTP服务器地址:smtp.gmail.com(SSL启用 端口:587) 21cn.c ...

  7. JQuery实现倒计时效果

    首先:引入jquery文件 <script type="text/javascript" src="http://www.cnblogs.com/Content/P ...

  8. 外部主机连接mysql服务器延时严重问题

    1.原因:由于mysql对连接的客户端进行DNS反向解析 2.禁用dns解析,在 /etc/my.cnf 中加入skip-name-resolve 3.反向解析说明: 所谓反向解析是这样的:mysql ...

  9. R语言数据处理

    写在前面:数据处理是数据分析与挖掘必不可少的步骤.下面列出一些常用的数据处理操作. 一.类型转换 用class()查看数据的类型,用as.类型名()进行类型转换. > num <- as. ...

  10. 了不起的分支和循环03 - 零基础入门学习Python009

    了不起的分支和循环03 让编程改变世界 Change the world by program while循环 说完了分支我们来说说循环,标准的while循环语法我们已经可以熟悉掌握了. 这里我们就简 ...