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. 【NOIP2013】花匠

    Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花排列得比较 ...

  2. UVA - 12099 The Bookcase

    No wonder the old bookcase caved under the massive piles of books Tom had stacked on it. He had bett ...

  3. 树莓派(4B)Linux + .Net Core嵌入式-初始化环境(一)

    一.树莓派简单介绍 二.软&件准备 硬件:树莓派4B主机.电源线.TF卡&TF读卡器.PC 软件:win32diskimager(用于烧系统到TF卡).Xshell或Windows T ...

  4. Mybatis入门简版（一）

    一.Mybatis介绍 MyBatis是一个优秀的持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动.创建connection.创 ...

  5. 比较两个文件的异同Python3 标准库difflib 实现

    比较两个文件的异同Python3 标准库difflib 实现 对于要比较两个文件特别是配置文件的差异,这种需求很常见,如果用眼睛看,真是眼睛疼. 可以使用linux命令行工具diff a_file b ...

  6. R-plotly|交互式甘特图（Gantt chart）-项目管理/学习计划

    本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/CGz51qOjFSJ4Wx_qOMzjiw 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号 ...

  7. 使用jmeter进行压力测试入门讲解

    1.下载安装jmeter 略 我这里放上5.1版本的,有需要可以下载 链接:https://pan.baidu.com/s/1xRZZmTY4do1oDU_xPit94Q&shfl=share ...

  8. java-try,return和finally相遇时的各种情况

    今天碰到了这样一个问题:使用try,return和finally会碰到的各种情况1,try中有return时,执行顺序:2,try和finally中都有return时,执行顺序:3,运算代码在fina ...

  9. php有orm吗

    ORM是通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据库中.本质上就是将数据从一种形式转换到另外一种形式. ORM提供了所有SQL语句的生成,代码人员远离了数据库概念.从 ...

  10. google hack 语法

    google hack a b c 自动对词进行拆分匹配 拆分标准 空格 "a b c " 把a b c 当成一个整体去查 " a*b" *通配符 里面是一个或 ...