# Getting the horizontal and vertical centers of an element

29th Jul 2020I 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
```

If you enjoyed this article, please support me by sharing this article Twitter or buying me a coffee 😉. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!