Bootstrap 50/50格与屏幕中间的“或”框覆盖

Question

我有我认为会是一个简单的问题，在两个50/50宽度的div在屏幕中间叠加一个框在屏幕上。\

什么即时试图做的是覆盖一个简单的div会最终被图像显示“或”字，因此用户选择登记等

我的问题是，我似乎无法得到它在页面上死点

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

我认为这将是简单的，但它ap当我在那里加载梨时，梨在页面上移动的比例只有50％。

当我尝试覆盖绝对超过其他两个div的div时，是否还有些东西丢失？

在此先感谢

下面是我的小提琴 https://jsfiddle.net/dimmers/5fteh5tk/5/

Answer 1

它基本上居中你的顶部（A）块以相同的方式，但你使用top: 50%; translateY(-50%);顶块上垂直居中。水平居中是相同的技术，只是使用left和translateX()

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

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

Answer 2

这是当left:calc(50% - 25px)就派上用场了。

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