<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. C语言递归实现二叉树（二叉链表）的三种遍历和销毁操作（实验）

    今天写的是二叉树操作的实验,这个实验有三个部分: ①建立二叉树,采用二叉链表结构 ②先序.中序.后续遍历二叉树,输出节点值 ③销毁二叉树 二叉树的节点结构定义 typedef struct BiTNo ...

  2. windows 终端命令详解

    打开"运行"对话框(Win+R),输入cmd,打开控制台命令窗口... 也可以通过cmd /c 命令 和 cmd /k 命令的方式来直接运行命令 注:/c表示执行完命令后关闭cmd ...

  3. 怎样将word文件转化为Latex文件：word-to-latex-2.56具体解释

    首先推荐大家读一读这篇博文:http://blog.csdn.net/ibingow/article/details/8613556 --------------------------------- ...

  4. ShuffleNet总结

    在2017年末,Face++发了一篇论文ShuffleNet: An Extremely Efficient Convolutional Neural Network for Mobile Devic ...

  5. linux OSI七层模型、TCP/IP协议栈及每层结构大揭秘

    学习Linux,就算是像小编我这样的小萌新,也知道OSI模型.什么?!你不知道!!! 好吧,这篇秘籍拿走,不谢~~~ 一.两个协议 (1)OSI 协议模型(7层)国际协议    PDU:协议数据单元对 ...

  6. Java二维数组的概念和使用方法

    二维数组 数组的数组---二维数组的每一个元素是一个一维数组 定义格式 数据类型[][] 数组名 = new 数据类型[二维数组的长度/包含的一维数组的个数][每个一维数组的长度]; int[][] ...

  7. 这么说吧，java线程池的实现原理其实很简单

    好处 : 线程是稀缺资源,如果被无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池对线程进行统一分配.调优和监控,有以下好处: 1.降低资源消耗: 2.提高响应速度: 3.提高线 ...

  8. jmeter监控服务资源

    转:http://www.cnblogs.com/chengtch/p/6079262.html  1.下载需要的jmeter插件 如图上面两个是jmeter插件,可以再下面的链接中下载: https ...

  9. 【Jenkins】通过ANT构建JMeter任务时提示找不到jtl文件时的解决方法

  10. 【java】java.util.Arrays类常用方法

    package Arrays类; import java.util.Arrays; public class TestArrays { public static void main(String[] ...