结合CSS3的新特性来总结垂直居中的实现方法

0.单行内容的居中

只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了

CSS Code复制内容到剪贴板 .middle-demo-1{    height: 4em;    line-height: 4em;    overflowhidden;    }  

优点:
(1). 同时支持块级和内联极元素
(2). 支持所有浏览器
缺点:
(1). 只能显示一行
(2). IE中不支持<img>等的居中
要注意的是:
(1). 使用相对高度定义你的 height 和 line-height
(2). 不想毁了你的布局的话,overflow: hidden 一定要
为什么?
请比较以下两个例子:

XML/HTML Code复制内容到剪贴板 <p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>   <br/>   <br/>   <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  

上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。

1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

CSS Code复制内容到剪贴板 .box{        position:absolute;/*或fixed*/       top:50%;        left:50%;        margin-top:-100px;        margin-left:-200px;    }  

2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

CSS Code复制内容到剪贴板 .box{        positionabsolute;或fixed       top:0;        rightright:0;        bottombottom:0;        left:0;        marginauto;    }  

3.利用display:table-cell属性使内容垂直居中;

CSS Code复制内容到剪贴板 .box{       display:table-cell;       vertical-align:middle;       text-align:center;       width:120px;       height:120px;       background:purple;       }  

4.使用css3的新属性transform:translate(x,y)属性;

CSS Code复制内容到剪贴板 .box{        positionabsolute;        transform: translate(50%,50%);        -webkit-transform:translate(50%,50%);        -moz-transform:translate(50%,50%);        -ms-transform:translate(50%,50%);    }  

5.最高大上的一种,使用:before元素;

CSS Code复制内容到剪贴板 .box{       position:fixed;       display:block;       background:rgba(0,0,0,.5);       }       .box:before{       content:;       display:inline-block;       vertical-align:middle;       height:100%;       }       .box.content{       width:60px;       height:60px;       line-height:60px;       color:red;  

6.Flex布局;

CSS Code复制内容到剪贴板 .box{        display: -webkit-box;        display: -webkit-flex;        display: -moz-box;        display: -moz-flex;        display: -ms-flexbox;        display: flex;        水平居中        -webkit-box-align: center;        -moz-box-align: center;        -ms-flex-pack:center;        -webkit-justify-contentcenter;        -moz-justify-contentcenter;        justify-contentcenter;         垂直居中         -webkit-box-pack: center;        -moz-box-pack: center;        -ms-flex-align:center;        -webkit-align-items: center;        -moz-align-items: center;        align-items: center;    }  

结合CSS3的新特性来总结垂直居中的实现方法