Question

正如GIF所示，

小丑svg在minHand div中，它应该以背景为中心：另一个svg在clockBack div中回调。

但是当调整窗口大小时，小丑看起来就像在身体的中心。有没有什么方法可以将小丑（minHand）放在中间位置（clockBack）？任何评论都欢迎和赞赏。

clown.svg，https://app.box.com/s/x77ydnb9p293w7lyxuqw34p3l4uusv0w

back.svg，https://app.box.com/s/e3dkxqsewz09bc3pq1jqxksmyd53ud09

代码结构就像，

<html>
<?xml version="1.0" encoding="utf-8"?>
<div id="clockBack">

<div id="minHand">
</div><!--minHand-->



</div><!--clockBack-->

<style>

body{
  background-color:yellow;
}
#clockBack{
  background-image: url(back.svg), none;        
  z-index:-1;
  display:block;
  margin:auto;
  width:70%;
  height:70%;
}
#minHand{
    background-image: url(clown.svg), none;
  width:20%;
  height:20%;
  position: absolute;
  z-index:2;
  top:70%;
  left:50%;
}

</style>


</html>

Answer 1

添加位置：相对于#clockBack。
然后向#minHand添加顶部和左侧50％，并转换：平移（-50％， - 50％）以使其垂直和水平完美居中。

查看codepen.

中的结果

#clockBack{
  z-index:-1;
  display:block;
  margin:auto;
  width:70%;
  height:70%;
  position: relative;
}
#minHand {
  width:20%;
  height:20%;

  z-index:2;

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

如何使用html div将svg集中在另一个svg中？

1 个答案: