ページの中央（垂直/水平）に円のdivを配置します。

Question

ページポストの結果として、私のページ上にダック（成功）またはクロス（エラー）円グラフをポップアップしようとしています。私は近づいていますが、中心に置くことはできません。

私のHTMLは、ページのロード時にJSで追加され、1秒間に示されている：

// Circle button alert popup 
function popupNotification(type) { 

    if (type == 'success') { 
     var popupButton = '<button type="button" id="popup-button" class="btn btn-success btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button>'; 
    } else if (type == 'warning') { 
     var popupButton = '<button type="button" id="popup-button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-warning-sign"></i></button>'; 
    } else { 
     var popupButton = '<button type="button" id="popup-button" class="btn btn-danger btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i></button>'; 
    } 

    $('body').append(popupButton); 
    $('#popup-button').fadeIn('fast'); 
    $("#popup-button").fadeTo(1000, 500).fadeOut(500, function(){ 
     $("#popup-button").fadeOut(500); 
     $("#popup-button").remove(); 
    }); 

} 

私のCSSは次のとおりです。

#popup-button { 
    position: fixed; 
    z-index: 9999; 
    top: 50%; 
    left: 50%; 
    opacity: 0.7; 
    cursor: wait; 
} 

.btn-circle.btn-xl { 
    width: 70px; 
    height: 70px; 
    padding: 10px 16px; 
    font-size: 24px; 
    line-height: 1.33; 
    border-radius: 35px; 
} 

このコードは、アイコンで円形のdivを中心に、それはあります幅の半分と高さの半分だけ離れている。私は成功なしで次のことを試しました：

#popup-button { 
    position: fixed; 
    z-index: 9999; 
    top: 50% - 35px; 
    left: 50% - 35px; 
    opacity: 0.7; 
    cursor: wait; 
} 

アイデアは大変ありがとうございます！

Answer 1

あなたは正しい答えに非常に近いです。余白プロパティに負の数を追加します。

#popup-button { 
    position: absolute; 
    z-index: 9999; 
    top: 50%; 
    left: 50%; 
    opacity: 0.7; 
    cursor: wait; 
    margin-left: -35px; 
    margin-top: -35px; 
} 

Answer 2

マイナスのマージンで操作できます。このソリューションは、クロスブラウザであり、しばしば使用されているが、それは「ハック」の一種である：

#popup-button { 
    position: fixed; 
    z-index: 9999; 
    top: 50%; 
    left: 50%; 
    margin-left: -35px; 
    margin-top: -35px; 
    opacity: 0.7; 
    cursor: wait; 
} 

また、あなたはCSS3 calc()機能を使用することができます。これは、より良いアプローチですが、それはすべてのブラウザ（calc() browser support）によってサポートされていません。

#popup-button { 
    position: fixed; 
    z-index: 9999; 
    top: calc(50% - 35px); 
    left: calc(50% - 35px); 
    opacity: 0.7; 
    cursor: wait; 
} 

もう一つは、私が言及する必要があります。
display: flexとalign-itemsとjustify-content CSS3のプロパティ（flex browser suppport）を使用して、コンテナ内に何かを配置することができます。これは、すべての子要素の配置と動作に影響を与えることに注意してください。

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.full-page-container { 
 
    display: flex; 
 
    
 
    height: 100%; 
 
    width: 100%; 
 
    
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
button { 
 
    height: 64px; 
 
    width: 64px; 
 
    border: 3px solid gray; 
 
    border-radius: 50%; 
 
}

<div class="full-page-container"> 
 
    <button>Hello World!</button> 
 
</div>

Answer 3

多分、ウインドウの高さと幅のプロパティで動作しますか？私はそれが負のマージンなしで行うことができると思いますtop: 100vh - 35px

Answer 4

をお試しください：

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

例：私はエイドリアンの答えに同意

.centered { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: red; 
 
    width: 10px; 
 
    height: 10px; 
 
}

<div class="centered"> 
 

 
</div>

Answer 5

。使用CSS3：とともに

transform: translate(-50%, -50%); 

：それは応答だとして

top: 50%; 
left: 50%; 

がよりよい解決策です、どんなに高さや親の幅が、あなたは他のソリューションのいくつかのように再計算する必要はありません。

はまた、あなたがSASSを使用している場合、私はCSSのトリックで、この便利な小さなmixinをお勧めします、ブラウザの様々な古いバージョンのを変換するベンダープレフィックスすることを忘れないでください。