1.用css3提供的transform属性
上代码.wrap{width: 400px;height: 400px;background-color: red;position: relative;}.child{width: 100px;position: absolute;background-color: black;left: 50%;top: 50%;transform: translate(-50%,-50%)}//html<div class="wrap"><div class="child">fdsf</div></div>
效果如下:
利用弹性盒子
代码:.wrap{display: flex;justify-content: center;align-items: center;height: 400px;width: 400px;border: 1px solid black}.child{background-color: cornflowerblue;width: 100px;margin: 10px}//html<div class="wrap"><div class="child">fdsf</div></div>