將圓形div居中在頁面中間（垂直/水平）

Question

由於頁面發布，我試圖在頁面上彈出刻度（成功）或十字（錯誤）圓形div。 我很近，但是不能完全集中。

我的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

您非常接近正確的答案。 將負數添加到margin屬性：

#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（）瀏覽器支持 ）：

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

我還要提一件事。
您可以使用display: flex來將容器中的任何內容居中display: flex帶有align-items和justify-content CSS3屬性的flex （ flex瀏覽器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

我認為可以做到無負邊距：

.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 4

也許它將與窗口的高度和寬度屬性一起工作？ 嘗試top: 100vh - 35px

Answer 5

我同意阿德里安的回答。 使用CSS3：

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

隨着：

top: 50%;
left: 50%;

這是一個更好的解決方案，因為它具有響應能力，無論父級的高度或寬度如何，您都不必像其他解決方案一樣重新計算。

另外，別忘了為各種較舊版本的瀏覽器進行供應商前綴轉換 ，如果您使用的是SASS，我建議CSS Tricks推薦這種方便的混合方法 。