先弄懂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. React数据传递

    React基础概念 React是基于组件化的开发,通过组件的组合,让web应用能够实现桌面应用的效果. React更有利于单页应用的开发. 并非MVC框架,只能算是V 具有单项数据流的特点 优势:代码 ...

  2. HTML与CSS入门——第十章 创建用于Web上的图像

    知识点: 1.选择图像软件的方法 2.准备用于网上的照片的方法 3.创建标题和按钮的方法 4.减少图像中颜色数量的方法 5.创建透明图像的方法 6.创建平铺背景的方法 7.创建Web动画的方法 10. ...

  3. Asp.Net HttpApplication 事件汇总

    Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法.你可以使用这个文件实现应用程序安全性以及其它一些任务.下面让我们详细看 ...

  4. 再关于IE11

    微软在上周刚刚发布了用于Windows 8.1上的首个Internet Explorer 11的预览版.我们已经确认Internet Explorer 11中的一些新特性,包括对WebGL的支持.预抓 ...

  5. ps 换图片的背景颜色

    先把图像格式换乘RGB然后调整颜色,不用谢我是活雷锋!www.idouly.com

  6. MyISAM 存储引擎

    在MYSQL 5.1 以及之前的版本,MyISAM 是默认的存储引擎.MyISAM 提供了大量的特性,包括全文索引,压缩,空间函数(gis)等,但是MyISAM不支持事务和行级锁,而且有一个毫无疑问的 ...

  7. deb包处理

    1.卸载 dqpg -l 查看信息 dqpg -r  ******  卸载 2.安装 dqpg -i ...............deb

  8. php每秒输出一次

    首先说到php.ini中的两个配置 output_buffering配置•Off: 表示关闭PHP输出缓存•On: 打开无限大的输出缓存•4096: 打开大小为4096Byte的输出缓存(默认) im ...

  9. javascript第二课练习

    <script type="text/javascript">   window.onload=function()   //网页全部加载完后执行   {     va ...

  10. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...