未知宽高元素窗口水平垂直居中

HTML

<div class="mask">
        <div class="dialog">
            <div class="content">
                <textarea name="textarea" class="title-font" placeholder="未知宽高元素窗口水平垂直居中(拖动右下角改变宽高)"></textarea>
            </div>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
}
body { font: 12px/1.5 tahoma, sans-serif; }
ul { list-style: outside none outside; }
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:underline; color:#F63;}
.title-font { font-family: "helvetica neue", stheiti, "microsoft yahei", \5FAE\8F6F\96C5\9ED1, tahoma, sans-serif; }

.mask{
    position: fixed;
    left: 0;
    top:0;
    height: 100%;
    height: 100vh;
    width: 100%;
    width: 100vw;
    text-align: center;
    background-color: rgba(200, 200, 200, .2);
}

.mask:after{
    content: " ";
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 0;
    height: 100%;
}

.dialog{
    display: inline-block;
    vertical-align: middle;
    color: #666;
    border: 3px solid lightblue;
    border-radius: 3px;
}

.content textarea{
    vertical-align: top; 
    border-radius: 2px; 
    border:0 none; 
    font-size: 14px; 
    padding:10px;
    min-height: 100px; 
    min-width: 300px;
}