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

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

• javascript

• And you are committed to using javascript/jquery for this? Or is a CSS-only solution valid as well? – roberrrt-s Commented Aug 29, 2016 at 9:50
• 6 I will answer with a question: what have you tried? If you google a bit you will find plenty of examples to start with. Then you can ask for help on your specific code – Lelio Faieta Commented Aug 29, 2016 at 9:50
• Yes, there's an option: calculate the center using window.screen - developer.mozilla.org/en-US/docs/Web/API/Window/screen – Mike Scotty Commented Aug 29, 2016 at 9:51
• 2 FYI, pure css solution. codepen.io/lzl124631x/pen/JKgwvY – lzl124631x Commented Aug 29, 2016 at 9:53
• $(window).height() - $('div.yourelement').height()) / 2 you can figure out width. – vaso123 Commented Aug 29, 2016 at 9:55

6 Answers 6

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

var x = window.innerWidth / 2;
var y = window.innerHeight / 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>

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>

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>

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);

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).