css解决水平垂直居中对齐-样式解决方案仓库

前端工程师必备样式解决方案之css解决水平垂直居中对齐。大家肯定之前在网上收集到很多水平垂直居中的方法,今天我把这几种常见的方法列出来,看看这些方法各自的优缺点。

解决方法从前辈们那学来的,我只是将它们整理。而且将现代浏览器下的居中方法,为了支持IE6、IE7下的hack两者最优的hack方法结合。

方法1——利用line-height

[原理]我们知道只要将 line-height 和 height 两个值设置相等,如果需要居中的是img元素,再给其加上vertical-align:middle;

但是IE6下img标签不支持,所以我们还得给它专门设置writing-mode:tb-rl文档流从下到下,从右到左(就是古书上的书写顺序),最后设置vertical-align: middle就可以实现IE6下img垂直方向上的居中对齐了。代码如下:

.minddle-static {
    width:500px;
    height:200px;
    line-height:200px;
    overflow:hidden;
    border:1px solid #ccc;
    text-align:center;
}
.minddle-static img {
    vertical-align: middle;
    border:1px solid #ccc;
}
<!--[if IE 6]>
<style type="text/css">
    .minddle-static a{
        height: 100%; /* 要保证和父元素高度一样才行 */
        writing-mode: tb-rl;
        vertical-align: middle;
    }
<![endif]-->

DEMO如下

line-height方法的css代码和DEMO

优点:同时支持块级和内联极元素;代码简短。

缺点:只能显示一行(这里为了让IE6下也支持img增加了hack,如果不是让img居中可以去掉)。

注意:不是显示图片就把hack都去掉,writing-mode: tb-rl;也去掉。

方法2——利用table-cell,IE6,7绝对定位

[原理] 我们知道 table 里只要添加text-algin:center;vertical-align:middle;不管是内联还是块级元素统统都能垂直水平居中。

所以我们用div来模拟table效果,设置div的display:table-cell,为了更好的语义,我们将table-cell的父元素显示形式设置为table。不过在ie7以下浏览器不支持display:table-cell属性,所以专门我们还得为它们设置hack。代码如下:

.minddle-parent{
    display:table;
    width:500px;
    height:200px;
    border:1px solid #ddd;
    *position:relative;
}
.minddle-parent .table-cell{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    *position:absolute;    /*容器a目的是自己的左上角与父容器中心点对齐*/
    *left:50%;
    *top:50%;
}
.minddle-parent .table-cell .pos{
    *position:relative;    /*图片设置负值是使自己的中心点与父容器的中心点重合,最终达到居中的目的*/
    *left:-50%;
    *top:-50%;
}

DEMO如下

display:table-cell方法的css代码和DEMO

优点:跟第一种方法比,不受行数限制,也不受元素父元素或者子元素的束缚,灵活,方便。

缺点:因为IE6-7不支持display:table-cell,所以使用了大量的hack,而且必须有3个元素,不然不能定位。

注意:如果不是为了img垂直居中,可以那么多莫名其妙的hack,这里只是为了图片让居中,图片肯定会有a标签包围,所以display:table-cell我觉得搭配绝对定位比较好。不过情况不同解决方法也可以变通…..

方法3——利用inline-block

dispaly:inline-block就是让对象显示呈递为内联元素但是对象里的内容作为块对象呈递,深入了解请点击怪飞,他的那篇文章介绍的很详细了。

从他那回来,我们继续。dispaly:inline-block跟dispaly:table-cell有些相似,例如对内部元素的包裹性,但是他们最大的不同就是没有父元素的匿名包裹特性,这使得其使用非常自由,可与文字,图片混排,可内嵌block属性元素,可以置身于inline元素中。可谓左右逢源。同时还要加一个元素,设高度值为100%。不过,IE7、IE6一如既往的不支持dispaly:inline-block,不过看了刚才怪飞的文章大家应该知道怎么解决了吧。那我们直接上代码

.minddle-warp {
    width:500px;
    height:200px;/*定义高度,让线盒型div#extra有一个参照物,可以是固定值,也可以是百分比*/
    border: 1px solid #ddd;
    text-align:center;
}
.minddle-warp #center,.minddle-warp b {
    display: inline-block;/*把元素转为行内块显示*/
    vertical-align: middle;/*垂直居中*/
    *display: inline; *zoom:1;
}
.minddle-warp b {
    height: 100%; /*设置线盒型为父元素的100%高度*/
}

DEMO如下

dispaly:inline-block方法的css代码和DEMO

优点:优点跟第二种table-cell方法一样,(但是父元素必须定义高度)

缺点:多了一个标签,需要给父元素设置高度不然没参照物。而又因为IE6-7不支持display:inline-block,增加了hack。

方法4——绝对定位垂直水平居中

用这种方法意味着必须给元素设置固定高度和宽度并且绝对定位left:50%,top:50%;外边距 margin:-height/2px 0 0 -width/2px才有效,代码如下

.middle-content{
    position: relative;
    width:500px;
    height: 200px;
    border:1px solid #ddd;
}
.middle-content .pic{
    position: absolute;
    left: 50%;
    top:50%;
    margin:-55px 0 0 -140px;/*上值的大小等于元素高度的一半,左值的大小等于元素宽度的一半*/
}

DEMO如下

固定宽高绝对定位方法的css代码已经DEMO

优点:兼容各个浏览器,代码简短,不需要增加额外标签

缺点:元素宽高定死,元素在body内,当用户缩小浏览器窗口时,body的滚动条将不会出现

方法5——padding相同值

这个代码是一般在多行内容用的比较多,而且高度随内容高度是可变的。可能我说了你还不知道我说的是哪个方法,代码如下

#warp{padding:30px;}
padding相同值css代码
<div id="warp">text</div>
padding相同值css代码运行

优点:兼容所哟浏览器,支持所有元素,简单易懂,结构清晰。

缺点:使用这种方法不能给容器固定高度,如果固定高度将无法达到效果。

垂直水平居中几中方案总结

看了以上的几种解决方法,大家发现垂直水平居中关键重点代码都是因为他不支持垂直居中,也就是vertical-align:middle;这个属性在div中没在table好使,text-algin:center这个属性好使(水平居中如果是行内元素我们就text-algin:center,宽度固定的就margin:0 auto或者你用绝对定位也行)。解决垂直居中我们觉得都是一些利用IE6、IE7的毒瘤来对付它们自身的毒瘤,有些方案你想不通,就不要想了,IE10都出来了,把这些毒瘤相同干嘛。反正用毒瘤的方法对付毒瘤好使就行了,记住怎么用就行了。当然以上几种方法为了解决IE6的问题,我把认为最好的解决方法和主方法搭配,纯属个人见解,读者们可以根据实际自行搭配。

速记方法

  • 方法一:line-height看属性一眼就看出这东西只对一行有效(行高等于父元素高度),IE6下img元素不起作用,那我们就用改变书写顺序writing-mode: tb-rl;,并vertical-align: middle;最后overflow:hidden;,超出部分隐藏。ok解决。
  • 方法二:table-cell的2话,因为一些原因所以,必须得有3个标签,最外边元素display:table;包裹一个display:table-cell;并且定义text-align:center;vertical-align:middle;因为已经3个元素放那了,(用dispaly:inline-block增加一个元素,显得不够聪明)所以对IE6、IE7采用绝对定位,
  • 方法三:inline-block内联块,所以必须先定义一个固定固定高宽的父元素,可以是固定值也可以是百分比,两个子元素都display: inline-block(内联块显示) vertical-align: middle(垂直居中),最后附加的元素的高度设为100%(inline-block内联块属性决定的,没办法。必须得设高度,记住就行)
  • 方法四:固定高宽,绝对定位left,top值为“50%”,最后设置margin-top和margin-left的负值,而且其值分别为元素高度和宽度的一半
  • 方法五就不说了T T

转载注明出处就行,就算对我整理码字的支持吧。DEMO下载

本文源链接:http://www.html5jscss.com/middle-center.html

转载请注明《css解决水平垂直居中对齐-样式解决方案仓库》| html5jscss

评论关闭了.