实现div垂直居中的display:table-cell方法示例介绍
脚本之家
ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!)
ie8以及以后版本可以识别!
ie7和ie6能识别vertical-align:middle;
如果盒模型中间只有几段文字的话,设置line-height就可以实现居中显示了!
如果要实现盒模型中的div居中,可以参考以下代码:
效果:
这个是多浏览器兼容的,但是得写几层div~ 但是想在层或img在层中垂直水平居中该怎样做呢?下一篇会涉及到。
ie8以及以后版本可以识别!
ie7和ie6能识别vertical-align:middle;
如果盒模型中间只有几段文字的话,设置line-height就可以实现居中显示了!
如果要实现盒模型中的div居中,可以参考以下代码:
CSS Code复制内容到剪贴板
- div#wrap {
- display: table;
- border: 1px solid #FF0099;
- background-color: #FFCCFF;
- width: 760px;
- height: 400px;
- *position: relative;
- overflow: hidden;
- }
- div#subwrap {
- vertical-align: middle;
- display: table-cell;
- *position: absolute;
- *top: 50%;
- }
- div#content {
- *position: relative;
- *top: -50%;
- }
这个是多浏览器兼容的,但是得写几层div~ 但是想在层或img在层中垂直水平居中该怎样做呢?下一篇会涉及到。