父容器的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. postgis 随笔

    一.表的定义:    对于任何一种关系型数据库而言,表都是数据存储的最核心.最基础的对象单元.现在就让我们从这里起步吧.    1. 创建表:    CREATE TABLE products (   ...

  2. mac os x 编译spark-2.1.0 for hadoop-2.7.3

    mac os x maven编译spark-2.1.0  for hadoop-2.7.3 1.官方文档中要求安装Maven 3.3.9+ 和Java 8 ; 2.执行         export ...

  3. VUE基本常识

    1.运行vue项目  项目根目录git Bash here npm run dev 为了能直接打开项目  配置项目package.json   添加--open  如下图: 2.坑:VUE初写小项目问 ...

  4. mybatis逆向工程generatorConfiguration详细配置

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...

  5. LInux下几种定时器的比较和使用

    在数据通信过程中,会遇到对数据发送时间的格式要求.所以要在应用中根据实际要求选择不同的定时器,就要考虑到几种应用定时器的特点. 定时器文章参考 一般而言有, 1.sleep,usleep和nanosl ...

  6. Tsinghua 2018 DSA PA3简要题解

    CST2018 3-1-1 Sum (15%) 简单的线段树,单点修改,区间求和. 很简单. CST2018 3-1-2 Max (20%) 高级的线段树. 维护区间最大和,区间和,左边最大和,右边最 ...

  7. webform的代码设计文件莫名出错的解决

    不知道怎么回事,建立webform工程时,编译,出错,提示代码设计文件(自动生成的文件代码,不能修改)出错,提示有的对象正在使用,于是删除里面多余的对象标记,还是没用,又自动生成了. 解决办法: 1. ...

  8. c迭代器与生成器

    一:迭代器 1.什么是迭代? 1.重复   2.下一次重复是基于上一次的结果 # l=['a','b','c','d'] # count= # while count < len(l): # p ...

  9. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  10. Java代码调用服务器上的Shell脚本

    Java代码调用服务器上的Shell脚本 这里主要是因为我们报表平台有用到用户手工录入的数据作为结果数据且需要纳入saiku去展示 如我们所知,saiku不会自动刷新,所以需要在数据更新接口中调用服务 ...