教程集 > 脚本编程 > javascript > 正文 CSS中未知高度水平垂直居中实例

CSS中未知高度水平垂直居中实例

发布时间：2016-11-23 编辑：jiaochengji.com

教程集为您提供CSS中未知高度水平垂直居中实例等资源，欢迎您收藏本站，我们将为您提供最新的CSS中未知高度水平垂直居中实例资源

在实际应用开发中未知高度是肯定了的，那我们要怎么给未知高度div来个垂直居中呢，下面我们来看代码。

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

<textarea name="runcool" rows="28" cols="75" > <html lang="zh-cn"> <head> <meta charset="utf-8" /> <style type="text/css"> * {padding:0;margin:0;} #tnnd{border:1px solid red;width:500px;margin:0 auto;font-size:12px;line-height:1.8;} /* 高级浏览器用 table-cell */ #infoBox{text-align:center;width:800px;height:800px; margin: 200px; background: #ccc; display:table;} #info{display:table-cell;vertical-align:middle;} /*专为 IE6/7 写的*/ .ie6 #infoBox, .ie7 #infoBox{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto} .ie6 #info, .ie7 #info{position:relative;top:-50%;text-align:center;} </style> </head> <body>

关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题
关于 CSS 的未知高度水平垂直居中问题

</body> </html></textarea>

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

您可能感兴趣的文章：
CSS中未知高度水平垂直居中实例
 css div水平垂直居中几个例子
 css实现body背景图片水平垂直居中方法
 未知大小图片在已知容器中的垂直和水平居中问题
 css3内容垂直居中及垂直滚动条例子
 css 图片水平垂直居中实例小结
 Css实现图片垂直上下左右居中显示
 css3实现图片在容器中等比例缩放及水平垂直居中
 css 文字垂直居中实现方法总结
 css中元素水平垂直居中4种方法介绍

上一篇：拍拍产品申缩菜单下一篇：js横向滚动特效代码

[关闭]

CSS中未知高度水平垂直居中实例

最近更新

浏览排行