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

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

优点：
（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{         position :  absolute ;或 fixed         top :0;         right right :0;         bottom bottom :0;         left :0;         margin :  auto ;    }  

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{         position :  absolute ;        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 - content :  center ;        -moz- justify - content :  center ;         justify - content :  center ;         垂直居中         -webkit-box-pack:  center ;        -moz-box-pack:  center ;        -ms-flex-align: center ;        -webkit-align-items:  center ;        -moz-align-items:  center ;        align-items:  center ;    }