居中元素定宽高

abosolute + 负 margin

元素偏移后,再修正元素自身宽高的一半,及可实现剧中显

CSS

 .wp {
           border: 1px solid red;
           width: 300px;
           height: 300px;
           position: relative;
       }
       .box {
           background: green;
           position: absolute;
           top: 50%;
           left: 50%;
           margin-left: -50px;
           margin-top: -50px;
       }
       .box .fixed-size {
           width: 100px;
           height: 100px;
       }

HTML

<div class="wp">
       <div class="box fixed-size">text </div>
   </div>

absolute + calc

CSS

.wp {
           border: 1px solid red;
           width: 300px;
           height: 300px;
           position: relative;
       }
       .box {
           background: green;
           position: absolute;
           top: calc(50% - 50px);
           left: calc(50% - 50px);
       }
       .box .fixed-size {
           width: 100px;
           height: 100px;
       }