JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div class="main">margin负值，垂直居中</div>
</div>

CSS

#box{
            margin:30px auto;
            position: relative;
            width:400px;
            height:300px;
            background: #000000;
            text-align: center;
        }
        #box .main{
            background: #ccc;
            width:200px;
            height:200px;
            position: absolute;
            top:50%;
            left:50%;
            margin-left:-100px;
            margin-top: -100px;
        }