css使得子元素相对父元素

CSS想必是前端工程师们非常熟悉的一个技术点，其中之一就是如何使得子元素相对于其父元素进行定位。下面就让我们来看看如何使用CSS实现这样的效果吧！

.parent {
      position: relative;
     /* 这是关键 */  width: 200px;
      height: 200px;
      background-color: #eee;
}
.child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: #333;
}
     

在这里，我们创建了一个父元素（class为“parent”），并为其设置了position: relative属性。这就意味着，子元素可以使用position: absolute属性来相对于父元素进行定位。

其中，子元素（class为“child”）通过设置top: 50%和left: 50%来让自己相对父元素居中。但是这样会让子元素的左上角重合于父元素的中心，这时我们可以使用transform: translate(-50%, -50%)来将其向左上方移动50%的宽度和高度，从而让其真正居中。

最后，我们通过设置父元素和子元素的宽度和高度，并为父元素设置了一个背景颜色（#eee），一个子元素的背景颜色（#333），来使得效果更直观明显。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！