<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. Material使用03 MdCardModule模块、MdInputModule模块

    需求:先需要增加一个登录模块 1 创建登录模块 ng g m testLogin 1.1 将共享模块导入到登录模块中 import { NgModule } from '@angular/core'; ...

  2. poj 3168 Barn Expansion 几何yy

    题链:http://poj.org/problem? id=3168 Barn Expansion Time Limit: 1000MS   Memory Limit: 65536K Total Su ...

  3. [hdu 4869](14年多校I题)Turn the pokers 找规律+拓欧逆元

    Turn the pokers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. python 金融网贷数据，pandas进行数据分析并可视化系列 (词频统计,基本操作)

    需求: 某某金融大亨想涉足金融网贷,想给网贷平台取一个名字,那么取什么名字,名字里面包含哪些关键字,在行业内的曝光率会相比较高一些呢? 可以理解为: 你负责某某网贷平台的网络推广工作,如何进一步优化各 ...

  5. ME01:猎场中猎头的内核

    前几天追了下<猎场>,只看了前面10多集,觉得下面的对话有点意思. 是关于猎头是干什么的? 猎头具备的素质. 对我们普通人是不是也有启发意义呢? 如何看人, 找到靠谱的合作人?找打好的老板 ...

  6. tomcat加入系统服务+开机自启

    1.首先将tomcat/bin 下的catalina.sh复制到目录/etc/init.d中,并修改名称为tomcat [root@iZ2318 ~]# sudo cp /usr/local/tomc ...

  7. GET请求/百度贴吧 有bug

    # -*- coding:utf-8 -*- import urllib, urllib2 import re import sys class Cuzz(): """这 ...

  8. 如何在MAC上安装SSHFS

    找了半天,试了各种方法,最后一种可行的方法. macOS 版本 10.12.6 具体看下面的说明: 安装Fuse 下载 osxfuse-3.6.3.dmg 并且安装. 链接 安装sshfs 下载ssh ...

  9. 企业级PPTP服务器

    第一个里程碑:检查系统是否支持ppp [root@m01 ~]# cat /dev/ppp cat: /dev/ppp: No such device or address 如果出现以上提示则说明pp ...

  10. 「mysql优化专题」90%程序员面试都用得上的索引优化手册(5)

    目录(技术文) 多关于索引,分为以下几点来讲解: 一.索引的概述(什么是索引,索引的优缺点) 二.索引的基本使用(创建索引) 三.索引的基本原理(面试重点) 四.索引的数据结构(B树,hash) 五. ...