以下是个人整理
父元素宽高已知
单行文本水平垂直居中
.parent{
text-align:center;
height:20px;
line-height:20px;
}
line-height值设置和height一样
子元素为非块级元素水平、垂直居中（包含多行文本）
IE9以及以上（使用css3）
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,50%)
}
不能使用css3的浏览器也得支持不是？
知道子元素宽高
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
margin-left: - 子元素宽度/2;
margin-top: - 子元素高度/2;
}
不知道子元素宽高
.parent{
height:100%;
}
.childBox{
line-height:100%;
}
.child{
display:inline-block;
line-height:normal;
vertial-align:middle;
}
父元素宽度和高度不知道的情况下，可以设置padding值，或者再加上text-align:center；就够了
文字不换行
情景是我在做左侧菜单栏的时候，要加选项的鼠标悬停效果。但是这样选项的悬停效果会自己换行。
word-break:keep-all;
white-space:nowrap;
就可以了，但是不要给宽度
