[分享]css元素在div中位置不变

在css中，经常会遇到需要让元素在div中位置不变的情况，这就需要使用一些css技巧来实现。

div {
  position: relative;
}

div > .fixed-element {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} 

上面的代码实现了一个div中的元素位置不变。首先，我们给div设置了相对定位的属性，这样它就成为了一个参考点。

然后，我们给div中的需要固定位置的元素设置了绝对定位的属性，并且将其left和top设置成50%，这样它就会在div的中心了。

最后，我们使用transform属性将元素向左和向上移动50%，使其完美地居中在div中。

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

div > .fixed-element {
  margin: 0 auto;
} 

还有一种方法是使用flex布局。我们给div设置了一个flex布局，然后让它的内容居中。接着，我们给div中的需要固定位置的元素设置了一个margin: 0 auto的属性，让它水平居中。

以上两种方法都可以实现元素在div中位置不变的效果，具体使用哪一种方法取决于开发者的个人喜好和代码需求。不过，无论使用哪种方法，都应该注意到不同情况下，使用不同的布局技巧会更加有效。