As I have seen many issues in centralizing a box in browser or window. Many of them make it centralized, by margining the position in percentage but that’s not the proper solution. So I come up with the best way by which you can make your div centralized.
I have used the html tag as,
And by applying the following CSS in your div element ,as I have taken the class .color-box . So,
The box is of height and width 100px respectively, you can change it accordingly. By giving it the absolute positioning it will get relative to its parent element,
Here we can also use the positon value fixed. Both will work the same. Now by making the top,left,right,bottom value 0 respectively, div will take its position in center,
But don’t forget to make its margin value auto, otherwise it will shift to the top-left position.
Now, you can check it by resizing the browser as shown in the above image, it will remain in centre and you can also use any images or text in the div.