各种居中以及文字一行内展示

以下是个人整理

父元素宽高已知

单行文本水平垂直居中

.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;

就可以了，但是不要给宽度