css实现未知尺寸元素水平垂直居中的方法

时间：2014-04-23 编辑：简简单单来源：一聚教程网

1.table表格

…类似这样的，

垂直居中对其来说，也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。所以实现起也来只要这样一行代码：

td{ vertical-align:middle; }

2.display:table-cell实现

水平垂直居中的随意内容

代码如下

复制代码

水平垂直居中的随意内容

#demo{ display:table; width:500px; margin:10px auto; background:#eee; }

#demo p{ display:table-cell;vertical-align:middle; height:100px; }

该方法只兼容ie8+.要解决兼容问题的话，可能要用到下面这个通用方法：

代码如下

复制代码

html部分

content

/* CSS 部分的代码实现：整体代码参见上述 demo*/
.wrap{
    width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;
    *position:relative;
}
.hack{
    display:table-cell;vertical-align:middle;
    *position:absolute;*top:50%;
}
.cnt{
    *position:relative;*top:-50%;
}

3.inline-block实现

代码如下

复制代码

水平垂直居www.111com.net中的随意内容

    #demo{
    height:100px;
    text-align:center;
    }
    #demo:after{
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
    content:”;
    }
    #demo p{
    display:inline-block;
    vertical-align:middle;
    }

垂直方向的对齐排版需使用 vertical-align ，并且只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框）的，简单的说，inline level元素按照 Normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。同样的该方法支持ie8+.

用inline-block布局会产生一个间隙的bug，虽然能解决，但是还是不推荐用。具体解决方法：

代码如下

复制代码

这是一个终极实现的水平垂直居中实例

    #demo{
    height:100px;
    text-align:center;
    font-size:0;
    }
    #demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
    }
    #demo:after{
    content:”;
    }
    #demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
    }

这个方法基本无Bug了，支持ie6+也解决了间隙的bug.

补充方法：定义定位实现未知高度元素的垂直居中（兼容IE5.5678910 firefox chrome）

需要在以上基础上改变HTML结构，把img放在一个元素中间，如下：

代码如下

复制代码

在支持display为table-cell的浏览器中依然用vertical-align:middle来实现，在IE5.5IE6IE7中利用定位来实现垂直居中，具体代码如下：

代码如下	复制代码
.box { border: 1px dashed #ccc; height: 200px; width: 200px; overflow: hidden; display: table-cell; vertical-align: middle; position:relative; } p { position:absolute; top:50%; width: 100%; text-align: center; } img { position:relative; *top:-50%; }

实现绝对居中的另类方法

代码如下

复制代码

绝对居中

兼容性：IE8+、firefox、chrome

注意：这里必须设置height属性才能居中

上一个： CSS中绝对定位absolute和相对定位relative详解
下一个： CSS中利用Transition实现动画效果

推荐专题

最新下载

热门教程

css实现未知尺寸元素水平垂直居中的方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程