垂直水平居中对齐

[webVueBlog]

 .box {
            width: 100%;
            height: 300px;
            border: 1px solid purple;
            display: flex;
            justify-content: center;
            align-items: center;
        }
<div class="box"><p>居中</p></div>