css 伪类实现垂直居中

css

 .wrapper {
   width: 300px;
     height: 300px;
     border: 1px solid #ccc;
     text-align: center;
 }
 .wrapper::after {
     content: '';
     display: inline-block;
     vertical-align: middle;
     height: 100%;
 }
 .wrapper > h3 {
     display: inline-block;
     vertical-align: middle;
 }

html
<div class="wrapper">
   <h3>hellow word</h3>
</div>