1

I want to center the absolutely positioned [h4] tag. The value of the [h4] title is retrieved from the database and it will have a different value each time.

I have tried below stuff.

h4{position: absolute;top:20px;left: 42%;}

It works when the h4 title has around 15 characters. But, it doesn't work if the h4 title has less characters or more than 18 characters. I mean, it works only for particular scenario. is there any flexible solution?

Amit
  • 77
  • 1
  • 11

2 Answers2

1

Try with a left: 50%; and transform: translate(-50%, -50%);

https://stackoverflow.com/a/25776315/11401246 for a good explanation on what exactly it is doing.

Dk Raziel
  • 28
  • 7
0
h4{display: flex; justify-content:center; align-items: center;}

Without using the position property u can center the elements using display flex.

John_ny
  • 767
  • 12
  • 33