将圆形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推荐这种方便的混合方法 。