未知长宽元素在已知300px*300px的容器中垂直居中（IE6/7/8/FF）

所属分类：网页制作 / CSS 阅读数： 2054

收藏 0赞 0分享

加了很多HACK，顺便复习一下！

*+property:value; /* IE7 */
_property:value; /* IE6 */

*property:value; /*IE6、IE7 共用*/

<!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>IE6/7/8/FF垂直居中</title><style>* { margin:0; padding:0; }#out { display:table; background-color:#F00; width:300px; height:300px; _position:relative; overflow:hidden; }#mid { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; -left:50%; }#in { _position:relative; _top:-50%; _left:-50%; text-align: center; }*+html #out { display:table; background-color:#F00; width:300px; height:300px; position:relative; overflow:hidden; }*+html #mid { vertical-align:middle; display:table-cell; position:absolute; top:50%; left:50%; }*+html #in { position:relative; top:-50%; left:-50%; text-align: center; }</style></head><body><div class="container"><div id="out">    <div id="mid">        <div id="in"> FF垂直居中FF直居中            FF垂直居中F直居中            FF垂直居中F直居中            FF垂直居中F直居中        </div>    </div></div></body></html>

提示：您可以先修改部分代码再运行

更多精彩内容其他人还在看

未知长宽元素在已知300px*300px的容器中垂直居中（IE6/7/8/FF）

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

前端设计师需要了解的9个问题

CSS强制性换行的方法区别详解

CSS语义化命名方式及常用命名规则

ul li内容宽度的问题的解决方案

html5+css3气泡组件的实现

html5+css3之CSS中的布局与Header的实现

一款恶搞头像特效的制作过程利用css3和jquery

大图片根据分辨率自适应宽度仍居中显示

CSS3提交意见输入框样式代码

网络赚钱

站长故事

未知长宽元素在已知300px*300px的容器中垂直居中（IE6/7/8/FF）

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

前端设计师需要了解的9个问题

CSS强制性换行的方法区别详解

CSS语义化命名方式及常用命名规则

ul li内容宽度的问题的解决方案

html5+css3气泡组件的实现

html5+css3之CSS中的布局与Header的实现

一款恶搞头像特效的制作过程 利用css3和jquery

大图片根据分辨率自适应宽度仍居中显示

CSS3提交意见输入框样式代码

网络赚钱

站长故事

一款恶搞头像特效的制作过程利用css3和jquery