IE下

一、无法实现IE下垂直居中

可能出现的情况1、

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
  <div style="width:500px; height:500px; border:3px solid #f00000; line-height:500px; vertical-align:middle; text-align:center;">
    <img src="http://www.jb51.net/images/logo.gif" style="vertical-align:middle; line-height:500px;" />
  </div>
</body>
</html>

可能出现的情况2、

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
  <div style="width:500px; height:500px; border:3px solid #f00000; line-height:500px; vertical-align:middle; text-align:center;">
    <strong style="line-height:500px; vertical-align:middle;"> <img src="http://www.jb51.net/images/logo.gif" style="vertical-align:middle; line-height:500px; display:block;" /></strong>
  </div>
</body>
</html>

二、实现IE下垂直居中

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
  <div style="width:500px; height:500px; border:3px solid #f00000; line-height:500px; vertical-align:middle; text-align:center;">
    <strong style="line-height:500px; vertical-align:middle;"> <img src="http://www.jb51.net/images/logo.gif" style="vertical-align:middle; line-height:500px;" /></strong>
  </div>
</body>
</html>

firefox、google等浏览器下

实现firefox、google等浏览器下垂直居中

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
  <div style="width:500px; height:500px; border:3px solid #f00000; line-height:500px; vertical-align:middle; text-align:center; display:table-cell;">
    <strong style="line-height:500px; vertical-align:middle;"> <img src="http://www.jb51.net/images/logo.gif" style="vertical-align:middle; line-height:500px;" /></strong>
  </div>
</body>
</html>

个人总结：display:table-cell;要定义在一个具有具体宽高值的块元素容器里面，否则无法实现firefox等浏览器下垂直居中

转载于:https://www.cnblogs.com/aim-at-is-the-tao-in/p/3410203.html

纯css实现DIV以及图片水平垂直居中兼容多种浏览器（实现过程）相关推荐

  1. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  2. 纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域

    最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...

  3. html语言对奇偶数行设置颜色,纯CSS实现奇偶数行颜色交替(兼容主流浏览器)

    做一张li二倍高的背景图,然后,上半部分PS成奇数行颜色,下半部分PS成偶数行颜色,然后将这张图定义给ul任其平铺.这样一来,纵使有万千行,它也会轻而易举的交替颜色... 本文DEMO背景图(1*50 ...

  4. 常用CSS实现DIV文本内容水平垂直居中

    第一种:利用CSS中的  display的table-cell  实现 /*让元素渲染为表格单元格*/     display:table-cell; /*设置文本水平居中*/     text-al ...

  5. css图片在盒子里居中,让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  6. CSS图片水平垂直居中的三种方法

    CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...

  7. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  8. vue中动态绑定背景图, 图片水平垂直居中

    vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中 外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...

  9. html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码

    纯css实现蓝色圆角效果水平导航菜单代码 这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...

最新文章

  1. python for i in range 三维_python中的三维卷积
  2. Unicode字段也有collation
  3. Visible Trees HDU - 2841(容斥)
  4. java自动gc_具有Java 7中自动资源管理功能的GC
  5. 卷积神经网络(CNN)介绍与实践
  6. 根据list中某个字段的值排序_MySql中常用函数
  7. c语言延时系统,基于VB的单片机C语言延时程序各参数计算系统
  8. 【报告分享】2021开放数字资产价值报告：数字化孕育新的发展动能.pdf（附下载链接）...
  9. sql serevr中脚本导出
  10. 【路径规划】基于matlab模拟退火算法求解多车型路径规划问题【含Matlab源码 913期】
  11. 联想智能农业移动应用开发系统用户手册
  12. HTML+CSS实现小米账号注册界面
  13. 北理c语言乐学作业分数运算,北理乐学C语言答案-最新（12页）-原创力文档
  14. 视频教程-2020年上半年 软考 系统分析师 论文真题讲解-软考
  15. android+vmware+wifi,笔记本使用wifi通过vmware workstation+openwrt 实现上网
  16. 计算关联系数matlab,matlab相关性系数【excel中的相关系数是如何计算出来的?】
  17. android viewpager中每个view,ViewPager系列之 打造一个通用的ViewPager
  18. Mac系统更新之前需要准备什么？
  19. 转换工具推荐：如何将PDF文档转换为PPT演示文稿
  20. CMDN Club #19: Windows 8 Dev BootCamp - Win8开发知识与产品实践

热门文章

  1. pelco协议及其实现的简单认识
  2. 【Flink】Flink Not all required tasks are currently running
  3. 【elasticsearch】如何部分更新文档 (partial update的使用)
  4. 【Java】开源工具 Hutool 不糊涂
  5. 【Java】ThreadLocal SimpleDateFormat 静态代码块 空指针异常
  6. Spark写入MySQL报错乱码+报错
  7. docker : unable to prepare context: context must be a directory
  8. 95-080-054-源码-启动-启动TaskManager
  9. 【SpringMVC】SpringMVC : 注解 @EnableWebMvc
  10. List实现类的特点和性能分析