Position using the center

In using the left property in CSS, the element is positioned by the left edge. How do I position using the middle edge?

Example

in

left: 0

0
|

In here, setting left to zero positions using the left edge in the square.

I want it to be like this

0
.|

Setting the property to 0 positions the square to the center.

@OmegaOrbitals You could use this css:

something {
    left: 50%;
    /* and possibly */ transform: translateX(-50%);
}

Or for something simpler:

something {
    text-align: center;
}
1 Like

No, that’s not what I meant. I don’t need to position an element in the center. I need to position it by the center.

For example, left positions using the left edge of the element. Right positions using the right edge of the element. Is there any CSS property to position it using the center of the element?

something along the lines of this, maybe?

element {
  left: calc(50% + x);
}
2 Likes
element {
  margin-left: 50px;
}

or

element {
  text-align: center;
}

Do what MrVoo said and use calc.

.mydiv {
  left: calc(50% + 20px);
  transform: translateX(-50%);
}
2 Likes

Maybe add padding on the left side

.MicrowaveCake {
  padding-left:50px;
}

I was confused on which one to choose as solution, but I decided with yours. You were more accurate by transforming it by 50%. Though transform doesn’t work well sometimes, so I did calc(50% - elemsizedividedby2).

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.