父容器的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. prometheus相关文章

    prometheus book https://yunlzheng.gitbook.io/prometheus-book/ 开发自己的分布式监控Prometheus Exporter时遇到的坑 htt ...

  2. libcrypto.so.1.0.0: no version information available

    openssl-1.0.1p源码安装后,依赖于openssl.so库的应用报错libcrypto.so.1.0.0: no version information available 解法:1. 创建 ...

  3. js里面的Object基本

    属性名必须是字符串,非字符串对象不能用来作为一个对象属性的键,任何非字符串对象,包括number,可通过toString()方法,类型转换成一个字符串1 1,Object基本格式 <script ...

  4. EF开发中EntityFramework在web.config中的配置问题

    异常: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架提供程序.请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序 ...

  5. maven加载springboot project

    maven加载springboot project   1● 下载项目 2● 构建project mvn install mvn package   3● idea加载 4● run启动   ==== ...

  6. Linux中安装tomcat后，window中访问不到tomcat的欢迎界面问题

    首先,可以通过xftp把下载的tomcat的tar.gz包传输到Linux中. 然后进行解压,tar -zxvf   tomcat的压缩包名称(可以使用tab键快速补齐) 解压后,可以使用修改/con ...

  7. python requests + xpath 获取分页详情页数据存入到txt文件中

    直接代码,如有不懂请加群讨论# *-* coding:utf-8 *-* #import jsonimport requestsimport pytesseractimport timeimport ...

  8. Surface RT2使用情况

    Surface RT2是一个6年的古董了,暂时还能使用的功能包括但不限于一些xbox小游戏,ppt阅读(加载慢),pdf阅读(加载慢),word阅读. 2018/6/16 爱奇艺关闭了大部分win8R ...

  9. PDF 补丁丁 0.6.0.3427 版发布（修复提取图片问题）

    新的版本进一步改善了导出图片的问题.

  10. linux常用命令 awk命令

    awk命令 awk [选项] '条件1{动作1} 条件2{动作2}...' 文件名 条件(Pattern) *) 一般使用关系表达式作为条件 *) x>10 判断变量x是否大于10 *) x&g ...