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.

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.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.bottom) / 2

  return ret

Using it:

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

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!