# Getting the horizontal and vertical centers of an element

Published:

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.

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``````

## 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!

## 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!