using element's own (not parent's) width for calculation or percentage in css, without javascript

Question

I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare `position:relative` and set negative `margin` values roughly equal to 50% of the element's width, but the closest I've been able to come is to half the element's percentage of its parent's width: ``` 123456789012345678901234567890 ``` I'm trying to find a CSS-only solution that will use the width of the element itself, not the width of the container. I can't use JavaScript to do this because I plan to use it as a MathJaX fix by embedding it in a `\style` command. (As far as I know, MathJaX does not provide for embedded HTML or JavaScr…

Accepted Answer

One pure CSS solution is to use `transform`.

```
element
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
```

Notes:

- You can use `top: 50%;` for vertical and `left: 50%;` for horizontal.

- You would then use `translateY(-50%)` for vertical and `translateX(-50%)` for horizontal centering.

- You can also use this trick to align elements to the bottom or right of it's parent, like in a `table-cell` by using `100%` instead of `50%` in the css.

- If you want to support older browsers, then you'll need to use prefixes for `transform`. I highly recommend autoprefixer in your workflow.

using element's own (not parent's) width for calculation or percentage in css, without javascript

Solution

Problem