div中实现上下左右居中的方法

HTML代码：

<div class="parent">
  <div class="child">
    子 div
  </div>
</div> 

 

CSS样式：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

上述代码中，首先将父div设置为相对定位（position: relative），然后将子div设置为绝对定位（position: absolute）。接着，通过top、left属性和transform属性来控制子div在父div中的位置：

• top: 50%：使子div的顶部距离父div顶部的距离为50%，也就是垂直方向上居中。
• left: 50%：使子div的左侧距离父div左侧的距离为50%，也就是水平方向上居中。
• transform: translate(-50%, -50%)：使用transform属性将子div向左偏移50%自身宽度的距离、向上偏移50%自身高度的距离，以达到完全居中的效果。

 

 

通过以上样式设置，子div就可以在父div中上下左右都居中了。