Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css实现未知尺寸元素水平垂直居中的方法

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

发布时间:2020-05-10   编辑:www.jquerycn.cn
jquery中文网为您提供css实现未知尺寸元素水平垂直居中的方法等资源,欢迎您收藏本站,我们将为您提供最新的css实现未知尺寸元素水平垂直居中的方法资源
今天又用到了,所以干脆记下来吧,方便以后好找一点。以下方法总结自网上的各位前辈的方法,希望对各位同学会有所帮助。

1.table表格

<table><tbody> <tr> <td>水平垂直居中的随意内容</td> <td>水平垂直居中的随意内容</td>…类似这样的,

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

td{ vertical-align:middle; }

2.display:table-cell实现

 代码如下 复制代码

    <div id=”demo”>

    <p>水平垂直居中的随意内容</p>

    </div>

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

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

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

 代码如下 复制代码

html部分
<div class="wrap">
    <div class="hack">
        <div class="cnt">
            content
        </div>
    </div>
</div>

/* 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实现

 代码如下 复制代码

    <div id=”demo”>
    <p>水平垂直居www.111cn.net中的随意内容</p>
    </div>
    #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,虽然能解决,但是还是不推荐用。具体解决方法:

 代码如下 复制代码

    <div id=”demo”>
    <p>这是一个终极实现的水平垂直居中实例</p>
    <!–[if lt IE 8]><span></span><![endif]–>
    </div>
    #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放在一个元素中间,如下:

 代码如下 复制代码

<div class="box">
    <p>
            <img src="/nice_mb/08/1c/24769.jpg" />
    </p>
</div>

在支持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%;
}

 

实现绝对居中的另类方法

 代码如下 复制代码

<style type="text/css">
.outer{
 background:#9F6;
 width:100%;
 height:400px;
 position:relative;
}
.inner{
 width:50%;
 height:50%;
 background:#990;
 margin:auto;
 position:absolute;
 left:0;
 top:0;
 right:0;
 bottom:0;
}
</style>
<div class="outer">
  <div class="inner">绝对居中</div>
</div>

兼容性:IE8 、firefox、chrome

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

您可能感兴趣的文章:
基于jQuery实现的水平和垂直居中的div窗口
Css实现图片垂直上下左右居中显示
未知大小图片在已知容器中的垂直和水平居中问题
css实现在div水平垂直居中与图片水平居中的效果
CSS中未知高度水平垂直居中实例
详解CSS3 object-position/object-fit属性实例
css中元素水平垂直居中4种方法介绍
css实现未知尺寸元素水平垂直居中的方法
css3内容垂直居中及垂直滚动条例子
css 文字垂直居中实现方法总结

[关闭]