父容器的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. centos中redis安装

    一.wget http://download.redis.io/releases/redis-4.0.2.tar.gz 二.tar xzf redis-4.0.2.tar.gz cd redis-4. ...

  2. 在Debian9服务器上安装最新版Python

    通过Xshell 6 远程连接linux服务器 安装前的准备工作 更新服务器: 命令:apt update && apt upgrade -y 安装python3的依赖库: 命令:ap ...

  3. oracle性能优化之awr分析

    oracle性能优化之awr分析 作者:bingjava 最近某证券公司系统在业务期间系统运行缓慢,初步排查怀疑是数据库存在性能问题,因此导出了oracle的awr报告进行分析,在此进行记录. 导致系 ...

  4. 读《Tooth-Marked Tongue Recgnition Using Multiple Instance Learning and CNN Features》

    本人 组会汇报的一篇关于齿痕舌判定的文章,贴上PPT 涉及多示例学习和神经网络方面知识. 准确率有待提高哈哈.

  5. '假定以下程序经编译和连接后生成可执行文件PROG.EXE,如果在此可执行文件所在目录的DOS提示符下键入:PROG ABCDEFGH IJKL<回车>,则输出结果为( ). void main( int argc, char *argv[]) { while(--argc>0) cout<<argv[argc]; cout<<"\n"; }

    main(int argc,char *argv[])函数的两个形参,第一个int argc,是记录你输入在命令行(你题目中说的操作就是命令行输入)上的字符串个数:第二个*argv[]是个指针数组,存 ...

  6. Day5_Py模块_1

    1. time & datetime模块 ----------------------------------------------------------- >>> im ...

  7. UVa LA 3266 - Tian Ji -- The Horse Racing 贪心，不只处理一端，也处理另一端以理清局面 难度: 2

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  8. Python正则表达式的re库一些用法（上）

    1.查找文本中的模式 search()函数取模式和要扫描的文本作为输入,找到这个模式时就返回一个match对象.如果没有找到模式,search()就返回None. 每个match对象包含有关匹配性质的 ...

  9. Unity3d KeyCode 键盘各种键值详情

    KeyCode :KeyCode是由Event.keyCode返回的.这些直接映射到键盘上的物理键. 值        对应键 Backspace     退格键 Delete      Delete ...

  10. datatable 添加列之前判断是否存在该列

    if (!dt.Columns.Contains("BDate")) { DataColumn dc1 = new DataColumn("BDate", ty ...