I am facing a challenge with overlaying a box in the center of the screen on two divs that are equally split in width.
My goal is to have a simple div, possibly an image, displaying the word "OR" for user registration options. However, I'm struggling to get it perfectly centered on the page.
.or-box{position:absolute; left:45%; top:50%; z-index:99999; border:1px solid black; height:50px; width:50px; text-align:center; padding-top:15px;}
Although I expected this task to be straightforward, the div seems to shift slightly off-center when loaded.
Is there something crucial I may be overlooking when trying to position an absolute div over two other divs?
Any help would be greatly appreciated.
Here is the link to my fiddle: https://jsfiddle.net/dimmers/5fteh5tk/5/