在页面中间（垂直/水平）居中圆形 div

Question

我试图在我的页面上弹出一个勾号（成功）或十字（错误）通告 div 作为页面 post 的结果。我很接近，但不能完全居中。

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

您可以使用负保证金进行操作。这个解决方案是跨浏览器的，经常被使用，但它有点像 "hacky":

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

我还需要提一件事。
您可以使用带有 align-items 和 justify-content CSS3 属性 (flex browser suppport) 的 display: flex 将任何内容置于容器中。请注意，它会影响所有子元素的排列和行为。

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 2

您非常接近正确答案。将负数添加到边距属性：

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

Answer 3

也许它可以与 window 高度和宽度属性一起使用？尝试 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%;

这是一个更好的解决方案，因为它具有响应性，无论父级的高度或宽度如何，您都不必像其他一些解决方案那样重新计算。

另外不要忘记为各种旧版本的浏览器添加供应商前缀 transform，如果您使用 SASS 我会推荐这个方便的小工具 mixin 通过 CSS 技巧。

在页面中间（垂直/水平）居中圆形 div

Center a circular div in the middle (vertical / horizontal) of a page

html

javascript

css

jquery