1

I am trying to make an element that has position: absolute; and is positioned using percentages. The thing is, it is not positioned using the center, rather, using the left corner. Is there a way to do this using pure CSS? The element is a flexbox, so there's no fancy tricks with the display CSS property. Here is my code.

#whateverDiv{
    display: flex;
    left: 25%; /* Uses left corner of element. I want to make it use the center of the element. */
}

Also, this is not a duplicate of here because the OP asked to center the element using percentage. I need to position it anywhere, such as 25%.

Community
  • 1
  • 1
MasterBob
  • 550
  • 1
  • 8
  • 19

2 Answers2

1

You could do this using css transforms if that's fine

#whateverDiv{
    display: flex;
    left: 25%;
    transform: translateX(-50%)
}
Ananth Rao
  • 1,232
  • 1
  • 9
  • 19
0

Try 'transform-origin' perhaps?.

div {
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    transform-origin: 50% 50%;
}
James
  • 679
  • 1
  • 8
  • 22