支持IE6 7 8,Firefox,Chrome,Opera,Safari 利用了一点float的小技巧
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
html,body{height:100%;margin:0;}
body{padding:1px;}
#mid-helper {
float: left;
height: 50%;
margin-bottom: -120px;
width: 10px; /*测试用,可删除*/
background-color: orange; /*测试用,可删除*/
}
#mid {
clear: both;
height: 240px;
background-color: #8fbc8f; /*测试用,可删除*/
opacity: .7; /*测试用,可删除*/
filter:alpha(opacity=70); /*测试用,可删除*/
}
</style>
</head>
<body>
<div id="mid-helper">
</div>
<div id="mid">
this is the #mid element
</div>
</body>
</html>
预览图:
- 大小: 7.8 KB
分享到:
相关推荐
CSS实现完美垂直居中 - 蓝色理想
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
DIV+CSS 图片垂直居中效果
css图片垂直居中方法
css 多行文本垂直居中显示,兼容各大浏览器!
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
div框水平垂直居中跟内容垂直居中
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实...
NULL 博文链接:https://highfly-s.iteye.com/blog/1878910
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
图片 CSS垂直居中图片 CSS垂直居中
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码: <!DOCTYPE ...
NULL 博文链接:https://gucaihe.iteye.com/blog/1465144
css不定宽高让盒子里的内容垂直水平居中.里面步骤都有,
js+CSS 图片等比缩小并垂直居中实现代码.docx
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...
CSS实现垂直居中的5种方法
div+css多行文字实现垂直居中,高度可自动适应
多行文本垂直居中的CSS需要这么设置: 复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; ...