ブートストラップ50/50 divと "OR"ボックスのオーバーレイが画面の中央に表示される

Question

画面中央に2つのdivに50/50幅のボックスを重ねると、画面上の。\

何イムがやろうとすると、ユーザーは私の問題があるなど

を登録するためのオプションを持っているので、単語を表示するための画像になってしまう「OR」する単純な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％になってしまったばかりの梨が動いています。

他の2つのdivより絶対的なdivをオーバーレイしようとしたときに何か不足していますか？事前

以下

で

おかげで私のバイオリンはleft:calc(50% - 25px)が便利になると、これはある 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

です。

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