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