Chann Chann - 10 months ago 51
jQuery Question

How to position element middle of visible area of a table?

I have a table that has a height more than screen area and i want to place a specific element middle of that table. when user scroll the window(not the table) element should visible in the middle of visible area of the table. Is there a specific way to accomplish this with CSS,JS or Jquery?

enter image description here

Answer

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>