<BODY>
<h1>未知宽高的图片水平垂直居中在div</h1>
<!--box-outer-->
<div class="box-outer">
<div class="box">
<img src="data:images/01.jpg" />
</div>
</div>
<!--box-outer-->
<h1>多行文本平垂直居中在div</h1>
<!--box-outer-->
<div class="box-outer">
<div class="box">
<p>123456</p>
<p>123456</p>
<p>123456</p>
<p>123456</p>
</div>
</div>
<!--box-outer-->
</BODY>

=============================

h1{
text-align: center;
margin:30px auto;
}
.box-outer{
width: 400px;
height: 400px;
margin: 30px auto;
}
.box {
width: 400px;
height: 400px;
border: 1px #000 dashed;
text-align: center;
vertical-align: middle;
display: table-cell;
*display: block;
*font-size: 175px;
/*约为高度的0.873，200*0.873 约为175*/

*font-family: Arial;
/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img {
vertical-align: middle;
}

可惜使用table-cell不兼容ie6.使用table-cell了，margin不起作用，可以外嵌套一层div

table-cell实现未知宽高图片，文本水平垂直居中在div的更多相关文章

  1. IOS UITableView 加载未知宽高图片的解决方案

    在开发中遇到了UITableView列表 UITableViewCell装载图片但不知Image的宽高 问题. 在解决该问题的时候,首先想到的是异步加载图片 采用第三方框架SDWebImage 实现对 ...

  2. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  3. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  4. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  5. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  6. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  7. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  8. 已知宽高和未知宽高的div块的水平垂直居中

    //已知宽高的情况 .div1_container{     border:1px solid #00ee00;     height:300px;     position:relative; } ...

  9. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

随机推荐

  1. python 爬取国家粮食局东北地区玉米收购价格监测信息

    #!/usr/bin/python# -*- coding: UTF-8 -*-import reimport sysimport timeimport urllibimport urllib.req ...

  2. 自学Zabbix3.2-配置功能简介

    zabbix配置功能介绍 zabbix配置内容比较多,我们要分为9大块来讲解.分别如下: 1. 主机与组        添加主机配置与组配置. 1.1.创建主机方法 1.1.1 新建主机      c ...

  3. 字符设备 Vs. 块设备 Character Device Vs. Block Device

    字符设备是指驱动发送/接受单个字符(例如字节)的设备. 块设备是指驱动发送/接受整块数据(例如512个字节为一个块)的设备. 常见的字符设备:串口,并口,声卡. 常见的块设备:硬盘(最小读取单位为扇区 ...

  4. intellij idea svn使用一 导入、更新、提交、解决冲突

    大体上是转载,针对版本14有一些特殊的添加. 查看svn的资源库: 下面的多出了一个svn的窗口,在左边有加号可以添加一个svn的库 输入svn的地址,我用的是本地的测试,所以地址为svn://127 ...

  5. Aop介绍及几种实现方式

    Aop介绍      我们先看一下wiki百科的介绍     Traditional software development focuses on decomposing systems into ...

  6. Android Studio 快速开发

    概述 现如今开发越来越追求效率和节奏,节省出时间做更多的事情,除了开发技术上的封装等,开发工具的使用技巧也是很重要的,今天就根据自己的经验来给大家介绍一下Android Studio快速开发之道. P ...

  7. 初识Avro

    Avro是Hadoop生态圈的一部分,由Hadoop的创始人Doug Cutting牵头开发,当前最新版本1.8.2.Avro是一个数据序列化系统,设计用于支持大批量数据交换的应用.它的主要特点有: ...

  8. sqlserver 存储过程 游标实例

    if exists(select * from sysobjects where id = object_id(N'dbo.test_cursor') and type = 'P') drop PRO ...

  9. UILabletext去掉乱码 控制颜色 行高 自定义大小 。显示不同的字体颜色、字体大小、行间距、首行缩进、下划线等属性（NSMutableAttributedString）

    text去掉乱码 设置不同颜色 行高 自定义大小 #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @ ...

  10. mouseout、mouseover和mouseleave、mouseenter区别

    今天在使用鼠标事件时,用错了mouseout,于是做个测试总结. 结论: mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入 ...