父容器的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. C#高级编程（第九版） 知识点梳理

    ---恢复内容开始--- 第二章 核心C# 2.7 命名空间可以使用别名,但是这样做有什么好处? 2.12 C#预处理器指令 #define DEBUG #if DEBUG Console.Write ...

  2. python操作mysql——mysql.connector

    连接mysql, 需要mysql connector, conntector是一种驱动程序,python连接mysql的驱动程序,mysql官方给出的名称为connector/python, 可参考m ...

  3. github隐藏文件&删除文件

    一.隐藏文件不提交至github 例如:需隐藏node_modules文件夹 1.找到.gitignore文件,一般这个是隐藏文件,需要显示隐藏文件 2.编辑.gitignore文件,加入下面这一句话 ...

  4. 102. Binary Tree Level Order Traversal二叉树层序遍历

    网址:https://leetcode.com/problems/binary-tree-level-order-traversal/ 参考:https://www.cnblogs.com/grand ...

  5. 将多窗体应用程序改造为仿Chrome形式的简易方法

    需求 在我们现有的ERP应用中,他是基于WinForm设计的,在早期的设计中,我们每打开一个作业,就会新建一个窗口,就像这样: 当我们打开很多的作业时,用户要通过Windows的任务栏慢慢找到,当然, ...

  6. 【jQuery、Express.js】AJAX提交Form

    HTML/CSS代码 构建onclick事件 <div class = "row"> <div class = "col-md-10"> ...

  7. (04) springboot 下的springMVC和jsp和mybatis

    1. springboot 和springmvc下的注解完全一样(新增了一些有用的) 常用的注解如下: @Controller @RestController= @Controller + @Resp ...

  8. Linux文件系统目录

    Linux操作系统目录呈树形结构,文件系统只有一个根目录,其余文件都是从根目录下延伸出来的 上图是一个Linux文件系统目录的展现,现在我们来看一下文件系统目录下相关目录及其功能 根目录( / ) L ...

  9. Rhel6.6---执行命令df -h卡住不动

    问题描述 nfs服务宕掉后,df -h卡住不动,使用xftp也无法打开文档路径 -bash-4.1# mount /dev/mapper/vg_root-LogVol00 on / type ext4 ...

  10. so so.*.*

    转自:http://unix.stackexchange.com/questions/5719/linux-gnu-gcc-ld-version-scripts-and-the-elf-binary- ...