Bootstrap 50/50 Div mit "OR" Box-Overlay in der Mitte des Bildschirms

Question

Ich habe, was ich dachte, wäre ein einfaches Problem mit einer Box in der Mitte des Bildschirms über zwei Divs, die 50/50 in der Breite sind auf dem Bildschirm. \

Was im ein einfaches div zu tun versucht, ist überlagern, das ein Bild ist angezeigt, das Wort am Ende wird „OR“, so hat der Benutzer Optionen für die Registrierung usw.

Mein Problem ist, Ich kann nicht scheinen, um es auf der Seite

.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;} 

Ich dachte, es wäre einfach, aber es ap Birnen bewegen sich gerade von 50% auf der Seite, wenn ich sie dort auflade.

Gibt es etwas, das fehlt, wenn ich versuche, ein div zu überlagern, das absolut über zwei anderen divs liegt?

Vielen Dank im Voraus

Unten ist meine Geige https://jsfiddle.net/dimmers/5fteh5tk/5/

Answer 1

Es ist im Grunde die gleiche Art und Weise Sie die oben (A) Block zentriert, aber man verwendet top: 50%; translateY(-50%); auf dem oberen Block vertikal zu zentrieren. horizontal Zentrieren ist die gleiche Technik, außer Sie left und translateX()

left: 50%; transform: translateX(-50%); 

https://jsfiddle.net/5fteh5tk/6/

verwenden

Answer 2

das ist, wenn left:calc(50% - 25px) kommt in handlichen.

.or-box{position:absolute; left:calc(50% - 25px); top:50%; z-index:99999; border:1px solid black; height:50px; width:50px; text-align:center; padding-top:15px;}