Getting the horizontal and vertical centers of an element

29th Jul 2020

I often find myself needing to calculate the horizontal center and vertical center of an element.

One example is a popover.

To position the popover perfectly, I need to know the horizontal and vertical centers of the button that triggers the popover. Here’s one example of a calculation I had to make.

One of the popover calculations.

Another example: When I built this spinning pacman, I need to get the center of the pacman to calculate the angle of rotation.

Need the center to calculate the angel.

I taught people how to build these two things step-by-step in Learn JavaScript. You may find it helpful if you want to learn to build things from scratch.

Getting the horizontal and vertical centers

It’s easy to get both the horizontal and vertical centers.

First, we use getBoundingClientRect to get information about the bounding box.

  • To get the horizontal center (which I call xCenter), we use the average of the left and right values from this bounding box.
  • To get the vertical center (which I call yCenter), we use the average of the top and bottom values of the bounding box.
const box = element.getBoundingClientRect()
const xCenter = (box.left + box.right) / 2
const yCenter = (box.top + box.bottom) / 2

Function to simplify everything

I made a function to streamline this calculation. I call it getBoundingBox. It returns all values getBoundingClientRect plus xCenter and yCenter.

The function look like this:

function getBoundingBox (element) {
  const box = element.getBoundingClientRect()
  const ret = { }

  // Loops through all DomRect properties.
  // Cannot spread because they're not enumerable.
  for (const prop in box) {
    ret[prop] = box[prop]
  }

  ret.xCenter = (box.left + box.right) / 2
  ret.yCenter = (box.top + box.bottom) / 2

  return ret
}

Using it:

const box = getBoundingBox(element)
const { xCenter, yCenter } = box

If you enjoyed this article, please tell a friend about it! Share it on Twitter. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!

Hold on while i sign you up…

🤗
Woohoo! You’re in!
Now, hold on while I redirect you.