6

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

8
  • And you are committed to using javascript/jquery for this? Or is a CSS-only solution valid as well?
    – roberrrt-s
    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 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 Aug 29, 2016 at 9:51
  • 2
    FYI, pure css solution. codepen.io/lzl124631x/pen/JKgwvY
    – lzl124631x
    Aug 29, 2016 at 9:53
  • $(window).height() - $('div.yourelement').height()) / 2 you can figure out width.
    – vaso123
    Aug 29, 2016 at 9:55

6 Answers 6

8

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

var x = window.innerWidth / 2;
var y = window.innerHeight / 2;
3
  • 1
    nope. It gives only the size of my screen, not the actual position in document Aug 29, 2016 at 10:06
  • not size, but half (thus the center). Use this to position the element you want...
    – joc
    Aug 29, 2016 at 10:08
  • Full code: stackoverflow.com/a/64990003/8804293 Nov 24, 2020 at 15:54
1

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>

2
0

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>

1
  • please, only javascript Aug 29, 2016 at 10:06
0

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>

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.