Getting the horizontal and vertical centers of an element

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.

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

:::note
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

Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.