Center position of current screen position

Question

Is there an option to find center position (top and left) of an actual screen position?

My main goal is to show div in the center of the screen no matter where i scroll or click

Answer 1

You can use window attributes to get center coordinates in pure javascript:

var x = window.innerWidth / 2;
var y = window.innerHeight / 2;

Answer 2

With Jquery

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}
$("div.target:nth-child(1)").center(true);
$("div.target:nth-child(2)").center(false);

div.container{
    width:300px;
    height:300px;
    border:1px solid #555;
    position:relative;
    top:10px;
    left:10px;
}

div.target{
    width:50px;
    height:50px;
    color:white;
    background:rgba(30,30,30,.7);
    border-radius: 10px;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="target">1<br>parent</div>
    <div class="target">2<br>window</div>
</div>

With Pure CSS

div {
  background:green;
  position:fixed;
  color:#fff;
  width:50px;
  height:50px;
  top:50%;
  left:50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

<div></div>

Answer 3

please add these code to add center div in web page

div {
  background:red;
  position:absolute;
  color:#fff;
  top:50%;
  left:50%;
  padding:50px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
} 

<div></div>

Answer 4

Please tray this code.

$(document).ready(function(){
  $(window).resize(function(){
 var windowWidth = window.innerWidth;
 var windowHeight = window.innerHeight;
 $('.className').css({
  position: 'absolute',
  left: windowWidth / 2,
  top: windowHeight / 2
    }); 
  });
  // call `resize` to center elements
  $(window).resize();
});

div {
  background:red;  
  color:#fff;  
  padding:50px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="className"></div>

Answer 5

You can write it like this:

div {
   display: block;
   position: fixed;
   height: // Your div height
   width: // Your div width
   top: // your window height / 2;
   left: // your window width / 2;`
}

The key of this problem is the position, where if you change it onto fixed, it means that element always sticks at that current position (even you scrolled).

Answer 6

See resize event documentation to get it to resize whenever the screen size is changed.

// grab el
const myEl = document.getElementById("yourId");
// initial styles
myEl.style.position = "absolute";
myEl.style.transform = "translate(-50%, -50%)"; // to counter
let x,y;
// update screen positioning
function updateCoords() {
  x = window.innerWidth / 2;
  y = window.innerHeight / 2;
}
function onResize() {
  updateCoords();
  myEl.style.top = x;
  myEl.style.left = y;
}
onResize(); // start in the middle
// when window size changes, update the element position
window.addEventListener("resize", onResize);