Question

所以，当我点击我的屏幕时，我想要显示一个圆圈（居中的垂直和水平），然后点击。

我的问题是，我总是在我元素的左上角。

这是一个Plunker：https://plnkr.co/edit/DLeQuK0IKxHwUM1sWk0T

我试过

margin-left:-50%

但没有成功。

编辑：我很快就得到了答案，谢谢！

答案是加入我的班级：

transform:translate(-50%, -50%);
display: block;

＆＃13;

// Code goes here

function printMousePos(event) {
  var element = document.getElementById("body");
  var para = document.createElement("div");
  para.className = "circle";
  para.setAttribute("style", "position : absolute;left:" + event.clientX + "px;top:" + event.clientY + "px");

  element.appendChild(para);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);

＆＃13;

/* Styles go here */

body {
  position: relative;
  height: 1000px;
}

.circle {
  color: blue;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 20px;
  border-color: blue;
  border-radius: 50%;
}

＆＃13;

<body id="body">
  Click Everywhere
</body>

＆＃13;

Answer 1

添加

transform: translate(-50%,-50%);
display: block;

到.circle class

Answer 2

左侧，div的顶部位于光标位置。你需要将你的圆圈向左和向上移动50％。

function printMousePos(event) {
  var element = document.getElementById("body");
  var para = document.createElement("div");
  para.className = "circle";
  para.setAttribute("style", "transform:translate(-50%, -50%); position : absolute;left:"+event.clientX+"px;top:"+event.clientY+"px");

  element.appendChild(para);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);

Answer 3

您可以设置一个额外的容器，并将其准确放置在点击位置，并将其设置为0宽度和高度。

然后将消息容器放入其中并使用css transform属性将其转换为中途：https://www.w3schools.com/cssref/css3_pr_transform.asp

<div class="container">
    <div calss="circle">
        Your text.
    </div>
</div>
<style>
    .container{
        position:absolute;
        top: XXXpx;
        left: XXXpx;
        width: 0;
        height: 0;
        overflow: show;
    }
    .circle {
        transform: translateX(-50%) translateY(-50%);
        width: 100px;
        height: 50px;
        background: #aaa;
    }
</style>

不需要棘手的JavaScript技巧。

您还可以通过添加以下内容为框添加固定偏移：

.circle {
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    height: 50px;
    background: #aaa;
    position: absolute;
    top: <XOFFSET>px;
    left: <YOFFSET>px;
}

Answer 4

hre是一个plunker，但有些东西让我很好。为什么延迟超过了radus？

// Code goes here

function printMousePos(event) {
  var element = document.getElementById("body");
  var para1 = document.createElement("div");
  para1.className = "circle";
  para1.setAttribute("style", "position : absolute;left:" + (event.clientX-125) + "px;top:" + (event.clientY-140) + "px");
  element.appendChild(para1);
  var para2 = document.createElement("div");
  para2.className = "point";
  para2.setAttribute("style", "position : absolute;left:" + (event.clientX-20) + "px;top:" + (event.clientY-30) + "px");

  element.appendChild(para2);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);

Answer 5

我们知道元素的总宽度为240，我们可以从x和y坐标中取出一半，就像这样。

＆＃13;

function printMousePos(event) {
  var element = document.querySelector("body");
  var para = document.createElement("div");
  para.className = "circle";
  para.setAttribute("style", "position : absolute;left:" + (event.clientX - 120) + "px;top:" + (event.clientY - 120) + "px");

  element.appendChild(para);
  console.log(event.clientX, event.clientY);
}

document.addEventListener("click", printMousePos);

＆＃13;

body {
  position: relative;
  height: 1000px;
}

.circle {
  color: blue;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border: solid 20px blue;
  border-radius: 50%;
}

＆＃13;

Click anywhere

＆＃13;

在点击上居中一个元素（绝对）

5 个答案: