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

您可以使用负边距进行操作。这个解决方案是跨浏览器的，并且经常使用，但它有点＆＃34; hacky＆＃34;：

#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）将容器中的任何内容置于中心位置。请注意，它会影响所有子元素的布局和行为。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为可以在没有负边际的情况下完成：

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

示例：

＆＃13;

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

＆＃13;

<div class="centered">

</div>

＆＃13;

Answer 4

也许它适用于窗口高度和宽度属性？试试top: 100vh - 35px

Answer 5

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

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

同时：

top: 50%;
left: 50%;

是一个更好的解决方案，因为它的响应速度，无论您赢得的父母的身高或宽度如何，都必须像其他一些解决方案一样重新计算。

对于各种旧版本的浏览器，也不要忘记供应商前缀转换。如果您正在使用SASS，我建议使用这个方便的小mixin通过CSS技巧。

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

5 个答案: