How can I align a div by its center?

Question

So, what I'm asking for is basically cx and cy for the circle tag, but for div. Something like <div centerX="50px"> etc.

Answer 1

In javascript, you can use the element.getBoundingClientRect() method to get the element’s current left, right, top, bottom, width and height. If you add half of the width to the left value and half of the height to the top value you’ll have the absolute position of the center in pixels. Conversely, if you wanted to write a function to position a div by its center point, do this:

function positionByCenter(x,y, elemID){

var element = document.getElementById(elemID);
var rect = element.getBoundingClientRect();

element.style.left = x-(rect.width/2)+”px”;

element.style.top = y-(rect.height/2)+”px”;
}

I hope this helps!

Answer 2

If you have a div with elements inside, you can use the css property :
Margin : 0 auto;
This does not work on empty elements thou