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

http://www.html5jscss.com/middle-center.html

前端工程师必备样式解决方案之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