父容器的css属性 display:table;overflow:hidden;
子容器的css属性 vertical-align:middle;display:table-cell;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

　　<style>

　　　　.a1{

　　　　　　width:500px;

　　　　　　height:400px;

　　　　　　display:table;

　　　　　　overflow:hidden;

　　　　}

　　　　.a1{

　　　　　　width:500px;

　　　　　　height:200px;

　　　　　　vertical-align:middle;

　　　　　　display:table-cell;

　　　　}

　　</style>
</head>
<body >
　　<div class="a1">
　　　　<div class="a2"></div>
　　</div>
</body>
</html>

div不固定高度垂直居中的更多相关文章

  1. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  2. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

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

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

  5. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  6. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  7. DIV水平和垂直居中的实现

    在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...

  8. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  9. div在页面垂直居中方法---增强改进版

    div在页面垂直居中方法---改进版 .wrap{ background: #ffffff; position:absolute; margin:auto; top:; bottom:; left:; ...

随机推荐

  1. label标签内含有input元素，点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  2. IntelliJ IDEA 2017.3.1安装步骤

    https://www.jetbrains.com/idea/download/#section=windows 下载旗舰版 1.下载完成后,运行安装: 2.next: 3.选择你要安装的目录,nex ...

  3. Eclipse安装TestNG

    1.在Eclipse中点击Help菜单,选择Install New Software选项,在弹出页面中输入安装地址即可安装. http://beust.com/eclipse 2. 3. 4. 等待T ...

  4. .net mvc 上传头像

    我用的是mvc5  开发环境vs2017 [仅供参考] [视图代码] <div > <img src="@path" alt="@att.Count&q ...

  5. 爬虫（四）requests模块1

    引入 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用. 警告:非专业使用其他 HTTP 库会导致危险的副作用,包括:安全缺陷症.冗余代码症.重新发明轮子症.啃文档 ...

  6. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

  7. 基于DES加密的服务端分析

    此程序建立了一个TCP服务端,端口号为10010,之后accept等待连接,如果接受到连接,那么就发送一些欢迎信息,以及提示信息---发送quit退出. 之后不停地调用recv,如果接受到数据,那么判 ...

  8. 大数据之NBA

    2017年NBA季后赛落幕后,网络上仍有大量关于NBA关键词的搜索. 这是近30天来,通过PC端和移动端搜索的趋势,可以看到有些日期的搜索指数是猛增的,因为NBA有大新闻爆出,比如8月23日,骑士与凯 ...

  9. Saiku数据库迁移H2迁移到Mysql(二十二)

    Saiku数据库迁移H2迁移到Mysql Saiku默认使用H2数据库来存储saiku的用户与角色信息,我们可以根据角色来做saiku的权限控制,然后将角色分配给用户 ,该用户就会有对应的约束了! 由 ...

  10. 【Java集合系列六】LinkedHashMap解析

    2017-08-14 16:30:10 1.简介 LinkedHashMap继承自HashMap,能保证迭代顺序,支持其他Map可选的操作.采用双向链表存储元素,默认的迭代序是插入序.重复插入一个已经 ...