css 完美垂直居中解决方案兼容ie8以上等其他浏览器
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以上等其他浏览器的更多相关文章
- css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)
容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...
- 使用CSS完美实现垂直居中的方法
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今 ...
- CSS垂直居中解决方案
问题场景 应用的地方比较普遍,这里有两个赤裸裸的栗子: 也有很多流行的方案,这里只针对各种方案的适用场景来做一些分析 问题抽象 其实,垂直居中问题可以简化成这样:一个容器HTML元素(#conta ...
- CSS实现完美垂直居中
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 tab ...
- Css实现透明效果,兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
- location.origin不兼容IE8解决方案
最近项目中遇到一个问题,在ajax跟后台交互时需要传一个全路径url.项目上线后,在谷歌,火狐,360等浏览器访问一切正常.但唯独IE8下出现问题,提示url:undefined ! 这就尴尬了!!! ...
- css 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- CSS的水平居中和垂直居中解决方案
在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...
- css将两个元素水平对齐,兼容IE8
css实现元素水平对齐 css实现水平对齐,如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的, ...
随机推荐
- centos7升级openssl、openssh常见问题及解决方法
升级至openssl 1.1.1版本 升级至openssh 8.0版本 openssl version -a 当前查看版本 一.安装telnet (以防升级失败,连不上服务器,建议弄) #查看是否 ...
- linux系统定时发送邮件
Linux Centos7系统下利用自带的mail发送邮件服务 简介 本章分为五部分. 第一部分是基于虚拟机下的CentOS 7环境定时发送邮件: 第二部分是基于在阿里云购买的CentOS 7服务器环 ...
- Jmeter插件图表分析
1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在setting中可以设置时间间隔以及其他的参数,右击可以导出exc ...
- 基于powershell的socks代理
0x01 前言 在实战中,内网的代理尤其重要,而常见的端口转发被反病毒软件已经盯死,那么学习使用基于powershell的渗透脚本进行代理.端口转发的非常有必要的. 0x02 使用 介绍ithub: ...
- Python3的编码整理总结
python3在内存中是用unicode编码方式存储的,所以不能直接储存和传输,要转化为其他编码进行储存和传输. 字符串通过编码转换成字节码,字节码通过解码成为字符串 encode:str --> ...
- shark恒破解笔记6-摆脱NAG
1.打开软件后,发现是未注册,然后点击关闭按钮,会弹出窗口 我们的目的就是为了能够去掉这个弹窗. 2.对这个程序进行查壳,没有什么发现 3.载入OD里面,F9运行起来,随后切换到程序主界面点击关闭按钮 ...
- python方法是什么?
python方法是什么? 方法用来描述对象所具有的行为. 在类中定义的方法可以粗略分为四大类:公有方法.私有方法.静态方法.类方法. 公有方法.私有方法一般所指属于对象的实例方法, 私有方法的名字以两 ...
- pycharm在进行debug时不小心把console关闭了,恢复console的办法
点击下图中右边的箭头就恢复了 此时可看到console已恢复
- CocosCreator中_worldMatrix到底是什么(下)
Cocos Creator 中 _worldMatrix 到底是什么(下) 1. 摘要 上篇介绍了矩阵的基本知识以及对应图形变换矩阵推倒.中篇具体介介绍了对应矩阵转换成cocos creator代码的 ...
- 课堂练习 Word count
1. 团队介绍 团队成员:席梦寒,胡琦 2. 项目计划 我们选第一.二个功能点进行编程. 具体计划: (1).首先爬取网站内容及网页长度: (2).对爬取的文件内容进行word count操作: 3. ...