javascript - 如何将元素定位在表格可见区域的中间？

Question

我有一个高度超过屏幕区域的表格，我想在该表格的中间放置一个特定的元素。当用户滚动窗口(而不是表格)元素时，应该在表格可见区域的中间可见。有没有特定的方法可以使用 CSS、JS 或 Jquery 来实现此目的？

Answer 1

Use position : fixed and have top and left as 50%, to get the element in center, adjust margin-left and margin-top taking width and height of the element in consideration.

.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -75px;/* Half of the width*/
  margin-top: -15px;/* Half of the height*/
  width: 150px;
  height: 30px;
}

.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  margin-top: -15px;
  width: 150px;
  height: 30px;
  background: green;
  border-radius: 20px;
  padding: 10px;
}

<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div>Elem..Elem..Elem..Elem..Elem..</div>
<br>
<br>
<br>
<div class="fixed">Fixed Element</div>