css 完美垂直居中解决方案兼容ie8以上等其他浏览器

<pre>
<!DOCTYPE html>
<html>
<head>
<title>DIV水平垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#outer {
display:table;
height:400px;
#position:relative;
overflow:hidden;
}
#middle {
width:300px;
height: 400px;;
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
background: #F0E68C;
}
#inner {
#position:relative;
#top:-50%;

}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
水平居中</br>
水平居中</br>
水平居中</br>
水平居中</br>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//显示浏览器版本
document.getElementById('ver').innerHTML = navigator.userAgent;
</script>
</pre>

移动端的写法

<pre>
<!DOCTYPE html>
<html>
<head>
<title>DIV水平垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#middle {
width:30%;
height: 10rem;
display:table-cell;
vertical-align:middle;
background: #F0E68C;
}

</style>
</head>
<body>
<div id="middle">
水平居中</br>
水平居中</br>
水平居中</br>
水平居中</br>
</div>
</body>
</html>
</pre>

ps:不能用绝对定位否则失效(可以加到外面一层)

还有个绝对定位居中的方法
<pre>
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</pre>

css 完美垂直居中解决方案兼容ie8以上等其他浏览器的更多相关文章

  1. css实现定高的元素在不定高的容器中水平垂直居中（兼容IE8及以上）

    容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...

  2. 使用CSS完美实现垂直居中的方法

    使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今 ...

  3. CSS垂直居中解决方案

    问题场景 应用的地方比较普遍,这里有两个赤裸裸的栗子:   也有很多流行的方案,这里只针对各种方案的适用场景来做一些分析 问题抽象 其实,垂直居中问题可以简化成这样:一个容器HTML元素(#conta ...

  4. CSS实现完美垂直居中

    之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 tab ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. location.origin不兼容IE8解决方案

    最近项目中遇到一个问题,在ajax跟后台交互时需要传一个全路径url.项目上线后,在谷歌,火狐,360等浏览器访问一切正常.但唯独IE8下出现问题,提示url:undefined ! 这就尴尬了!!! ...

  7. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  8. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  9. css将两个元素水平对齐，兼容IE8

    css实现元素水平对齐 css实现水平对齐,如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的, ...

随机推荐

  1. e课表项目第二次冲刺周期第八天

    昨天完成了什么? 昨天,我们组商量讨论了二层界面的设计,添加课程所需要的信息大概有:课程名称.教室.任课教师.上课时间.类型(单周.双周.单双周)以及备注等等.然后,我们通过界面的UI设计,让我们软件 ...

  2. .net core 3.0 WPF中使用FolderBrowserDialog

    前言 随着.net core 3.0 的发布,WPF 也可以在 core 平台上使用了.当前的 WPF 不支持跨平台,仅能够在 Windows 平台上使用.如果想体验 WPF 跨平台开发,可以访问开源 ...

  3. 机器学习：LibSVM与weka在eclipse中的使用

    LibSVM是weka3.5以后的版本新加的功能,使用这个算法必须自己下载jar包,配置进项目: LibSVM在weka可视化界面的使用,很多人写过,但在clipse下的调用资料却不多,试了很多都不能 ...

  4. [JoyOI1519] 博彩游戏

    题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目背景 Bob最近迷上了一个博彩游戏…… 题目描述 这个游戏的规则是这样的:每花一块钱可以 ...

  5. [POJ2248] Addition Chains 迭代加深搜索

    Addition Chains Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5454   Accepted: 2923   ...

  6. [USACO10NOV]购买饲料Buying Feed 单调队列优化DP

    题目描述 约翰开车来到镇上,他要带 KKK 吨饲料回家.运送饲料是需要花钱的,如果他的车上有 XXX 吨饲料,每公里就要花费 X2X^2X2 元,开车D公里就需要 D×X2D\times X^2D×X ...

  7. 第三方软件 vnc提权

    通过读取注册表十进制数 将得出的十进制数去掉第一个数其他转换成16进制 破解16进制数得到密码 vncx.exe -W 回车 输入16进制数 连接vnc 读取 vncx4.exe -w 8个数 自动破 ...

  8. jmeter打印变量的三种方式

    1.使用Debug Sampler 2.使用log打印到jemter日志 3.使用System.out.println打印到cmd命令行

  9. SpringBoot HATEOAS用法简介

    REST风格简介 介绍HATEOAS之前先简单介绍一下REST,REST 是 Representational state transfer 的缩写,翻译过来的意思是表达性状态转换.REST是一种架构 ...

  10. ESP8266开发之旅 基础篇② 如何安装ESP8266的Arduino开发环境

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...