父容器的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. Python自学:第三章 使用del语句删除元素

    motorcycles = ["honda", "yamaha", "suzuki"] print(motorcycles) del mot ...

  2. IPFS 使用入门

    在上一篇文章介绍了IPFS要做什么, 本篇文章介绍下IPFS怎么用, 按照本站的风格,我不会仅仅把一个个命令列出来,同时会说明命令在后面为我们做了什么. IPFS 安装 要使用IPFS, 第一步肯定是 ...

  3. python 【pandas】读取excel、csv数据，提高索引速度

    问题描述:数据处理,尤其是遇到大量数据且需要for循环处理时,需要消耗大量时间,如代码1所示.通过data['trip_time'][i]的方式会占用大量的时间 代码1 import time t0= ...

  4. 移动端遇到的问题小结--video

    本篇主要是针对Android系统,所遇到的问题. 1. video的全屏处理: 这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏.要想全屏效果只需对video标签加   webkit-plays ...

  5. yml配置文件读取出错 Exception in thread "main" while scanning for the next token found character '\t(TAB)'

    这几天在学习springboot的微服务项目,在配置文件方面也想尝试下新的yml配置,就想把原来项目properties写的文件转换成yml试一下(老项目是之前检出在了eclipse里面),结果写好了 ...

  6. 1、java的数据类型

    一.基本数据类型 1.整型(byte,short,int,long) byte在内存中占用一个字节,short占用两个字节,int占用四个字节,long占用8个字节: Java语言中整型默认为int型 ...

  7. SAP基础：定位点运算

    先看一下下面简单的代码: REPORT zlytest003. ) VALUE '21.00'. ) . b = a. WRITE b. 运行结果是: 这时候到程序属性页面: 修改固定点算术为空. 保 ...

  8. 磁盘当前目录下存在文件 c1.txt，其中存放了一段英文文字。请编程实现将c1.txt中英文文字全部转换为答谢字母，并保存到c2.txt中。要求：c2.txt文件前面保存的是c1.txt文案中的原始文字，后面紧跟着的是转换后的文字

    #include"stdio.h"#include"string.h" void main(){ FILE *fp1,*fp2; char ch[1000]=& ...

  9. crontab 每分钟、每小时、每天、每周、每月、每年执行

    每分钟执行 * * * * * 每小时执行 0 * * * * 每天执行 0 0 * * * 每周执行 0 0 * * 0 每月执行 0 0 1 * * 每年执行 0 0 1 1 * 每小时的第3和第 ...

  10. sftp无法连接问题

    sftp连接linux 出现错误,就是服务器没有开sftp服务 解决:在linux服务器上,确保sftp定义在sshd的配置文件(一般为/etc/ssh/sshd_config)中:Subsystem ...