参考:http://css-tricks.com/centering-in-the-unknown/

<style>
.valign {
font-size: 0px;/* clear spacing*/
}
.valign:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.valign-middle,
.valign-bottom {
display: inline-block;
font-size: 1rem;
}
.valign-middle {
vertical-align: middle;
}
.valign-bottom {
vertical-align: bottom;
}
</style>
<div class="valign" style="height: 20rem;border:1px solid red;">
<div class="valign-middle" style="border:1px solid blue;">
我在中间
</div>
</div>
<br>
<div class="valign" style="height: 20rem;border:1px solid red;">
<div class="valign-bottom" style="border:1px solid blue;">
我在底部
</div>
</div>

css div 垂直居中的更多相关文章

  1. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  2. css div垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  4. css的div垂直居中的方法,百分比div垂直居中

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

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

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

  6. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

  7. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  8. html css div img垂直居中

    <head> <meta charset="UTF-8"> <meta name="Generator" content=&quo ...

  9. 让div垂直居中的5种方法

    方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...

随机推荐

  1. 字符集设置为UTF-8

    vi /etc/my.cnf [mysqld] character-set-server=utf8 [mysql] default-character-set=utf8 来自为知笔记(Wiz)

  2. 每个极客都应该知道的Linux技巧

    每个极客都应该知道的Linux技巧 2014/03/07 | 分类: IT技术 | 0 条评论 | 标签: LINUX 分享到:18 本文由 伯乐在线 - 欣仔 翻译自 TuxRadar Linux. ...

  3. UVALive 5532 King(差分约束,spfa)

    题意:假设一个序列S有n个元素,现在有一堆约束,限制在某些连续子序列之和上,分别有符号>和<.问序列S是否存在?(看题意都看了半小时了!) 注意所给的形式是(a,b,c,d),表示:区间之 ...

  4. PHP设计模式之装饰者模式

    <?php /* 装饰者模式动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性的替代方案. */ header("Content-type:text/html; cha ...

  5. ecshop 用户名和邮箱都能登陆

    1.打开/includes/modules/integrates/integrate.php文件,并找到下面代码 if ($this->check_user($username, $passwo ...

  6. where group by联合使用

    where group by联合使用   select 列a,聚合函数 from 表名 where 过滤条件 group by 列a having 过滤条件 group by 字句也和where条件语 ...

  7. mysql innodb锁简析(2)

    继续昨天的innodb锁的分析: 注:此博文参考一下地址,那里讲的也很详细.http://xm-king.iteye.com/blog/770721 mysql事务的隔离级别分为四种,隔离级别越高,数 ...

  8. YII内置验证规则

    required: 必填字段验证, 来自 CRequiredValidator类的别名 array(‘字段名列表用逗号隔开’, ‘required’),    就这样的一个小小的写法,可以让字段前面加 ...

  9. selenium python (六)定位一组对象

    checkbox源码: <html><head><meta http-equiv="content-type" content="text/ ...

  10. linux笔记_20150417_ubuntu 常见问题_文件_音乐播放器

    最近在学习ubuntu的过程中,遇到了一些问题,就记下来了它的解决办法.以希望对你也有用. ),至少保证周围局域网内用户可以访问.至于配置文件,内容比较少,反正对我来讲能用就ok了~不知道会不会很弱 ...