使用flex布局使文字上下左右居中

html:

用水统计

css:

.title-commen{        
position: absolute;    
height: 7%;    
width: 100%;        
padding-left: 10px;    
display: flex;    
align-items: center;
justify-content: space-around;    
flex-direction: column;
}

拓展：
//使文字上下居中
display: flex;
justify-content: space-around;
flex-direction: column;
//使文字左右居中
display: flex;   
align-items: center;