div屏幕居中，并且文字在div居中

如何使用div在屏幕里居中,div里的文字也居中.

屏幕居中且文字居中.png

/*
 *css class selector
 *使用: class="center"
 */
.center {
    text-align: center;
    color: blue;
    font-size: 20px;
    border-radius: 10px;
    background-color: gray;
    width: 50%;
    height: 100px;
    /*文字在div里居中,这里设置为跟div高度一样*/
    line-height: 100px; 
    /*使div在屏幕里居中*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

使用实例:

<div class="center">屏幕居中,文字居中</div>