代码之家 › 专栏 › 技术社区 › Horai Nuri

如何计算居中div的顶部和左侧位置?

css-transforms css3 css javascript

Horai Nuri · 技术社区 · 8 年前

这个问题比标题要复杂一些,我试图得到使用这些css属性的中心div的左上角的值:

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

我可以得到左上角的值,没有任何问题,但我不知道如何 translate(-50%, -50%) 为下面的福拉表演。

尝试小提琴测试: https://jsfiddle.net/nqym3s4b/

...
<div id="div1">
    <div id="div2">...</div>
</div>

var div = document.querySelector('#div2');

var w = div.offsetWidth, 
    h = div.offsetHeight;

// top & left
var lw = (w / 100) * 50,
    lh = (h / 100) * 50;

// top & left with transform(-50%, -50%)
var tw = (lw / 100) * 50,
    th = (lh / 100) * 50;

left = 'left: ' + tw + 'px;';
top = 'top: ' + th + 'px;';

有什么想法吗?

2 回复 | 直到 8 年前

Temani Afif 8 年前

translate 会考虑 width / height 的 内部的 元素,因此50%是转换元素宽度/高度的一半 top / left 这将考虑起源元素。

计算是两个值的简单相加 (我在 #div2 所以你可以看到结果)

var div1 = document.querySelector('#div1'); //parent element
var div2 = document.querySelector('#div2'); //translated element

var w1 = div1.offsetWidth,
    h1 = div1.offsetHeight;

var w2 = div2.offsetWidth,
    h2 = div2.offsetHeight;


var lw = (w1 / 100) * 50 + (-w2 / 100) * 50,
    lh = (h1 / 100) * 50 + (-h2 / 100) * 50;


document.querySelector('#left').innerHTML = 'left: ' + lw + 'px;';
document.querySelector('#top').innerHTML = 'top: ' + lh + 'px;';

document.querySelector('#div3').style.left = lw + 'px';
document.querySelector('#div3').style.top = lh + 'px';

#div1 {
  width: 560px;
  height: 240px;
  background: red;
  position: relative;
}

#div1 #div2 {
  width: 340px;
  height: 120px;
  background: yellow;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#div1 #div3 {
  width: 50px;
  height: 50px;
  background: blue;
  position: absolute;
  opacity: 0.2;
}

<div id="div1">
  <div id="div2">
    <span id="left"></span>
    <br>
    <span id="top"></span>
  </div>
  <div id="div3">
    <!-- to compare -->
  </div>
</div>

Ivan Jeffrey Zhao 8 年前

这张照片是我从 MDN web docs . 它显示了css translate属性的工作原理。基本上,html的工作原理如下:原点保持在元素的左上角, x 轴向右和 y 轴向下

该属性以二维向量为参数( X 和 Y )并按矢量定义的方向移动整个元素。

推荐文章

Jam3sn · 变量旋转文本的绝对位置

8 年前

John Balvin Arias · 当css transform:scale()处于活动状态时,单击边框按钮会触发单击

8 年前

Joshua Leung · 如何旋转文本并固定到右下角?

8 年前

marius · jQuery UI可选css转换问题

8 年前

jean-max · 矩形中的菱形HTML和CSS3

8 年前

Eugenio · 无极旋转DIV,但具有绝对定位

8 年前

Boucherie · CSS/SCSS rails转换div,但不是嵌套图像(rails)

8 年前

akhil regonda · 如何使用transform scale删除屏幕上显示的滚动条?

8 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

8 年前

Scoob · 在flexbox中不工作的锚点元素上变换比例

8 年前