一行或者两行都上下居中显示【文字垂直居中显示】文字垂直居中显示 

.rtips p{ position:absolute;  height:50px; vertical-align:middle; top:0px; left:15%; width:100%;  line-height:22px; font-weight:normal; overflow:hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: left;
        justify-content: left;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

 

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        .rtips{ width: 500px; height: 100px; border: red 1px solid;}
        .rtips p{ position:absolute; 
            width: 100px;  height:50px; 
            vertical-align:middle; 
             font-weight:normal; overflow:hidden;
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: left;
                justify-content: left;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
        }



    </style>


    <div class="rtips">
    
        <p>的腹股沟</p>
        
    </div>
<div class="rtips">
    
        <p>胜利大街菲利克斯剪短发</p>
        
    </div>

    
</body>
</html>

 

 

posted @ 2015-09-01 18:25  Shimily  阅读(1012)  评论(0)    收藏  举报