Question

我正在尝试将元素放在屏幕的中心。当我使用时：

this.css("position","fixed");
this.css("top", "50%");
this.css("left", "50%");

enter image description here

它有效，但是当我使用

时

this.css("position","fixed");
this.css("top", $(window).height()/2+"px");
this.css("left", $(window).width()/2+"px");

enter image description here

它不起作用！（它将元素相对于我认为也位于第一个元素的右下方）

我做错了什么？

这是我捐赠按钮的代码：

.donate-button {
    display: table;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background: #CC0000;
    margin: auto auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.donate-text{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: 'Sniglet', cursive;
    font-size: 100px;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}

Answer 1

是因为你把容器的左上角放在50％......你通常应该这样做：

this.css("margin-top", -(this.css("height").replace("px","")*0.5)); 
this.css("margin-left", -(this.css("width").replace("px","")*0.5));

所以它会回到中心

我将它更改为JS以适合您的答案，但实际上您应该创建一个css类：.fixed-to-center或具有所有这些CSS属性的东西，然后应用类this.addClass("fixed-to-center");：）

Answer 2

好的，我不想留下这个答案：

我认为你并没有以正确的方式接近这个，请查看这个小提琴，看一个更简单的方法来消除任何JS问题（以及所有JS也是如此：P）

http://jsfiddle.net/eW6rs/3/

.thing {
    position: absolute;
    background: rgba(100,100,255,0.5);
    height: 80px;
    width: 120px;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -40px;
}

.thing.left {
    right: auto;
    left: -140px;
    margin-left: 0;
}

.thing.top {
    top: -100px;
    margin-top: 0;
}

.thing.right {
    right: -140px;
    left: auto;
}

.thing.bottom {
    top: auto;
    bottom: -100px;
}

基本上，我们的想法是放置你的东西＆＃34;进入按钮容器，然后根据它的位置定位它们：）

Answer 3

在我看来，当您调整浏览器大小时，图像会偏离中间位置。如果是这样，那么你应该考虑在调整大小时触发相同的功能。

检查此代码：

function makeItCenter(e) {
    var main = $(e.currentTarget || e);
    main.css({
         "position": "fixed",
         "top": "50%",
         "left": "50%",
         "marginLeft": -main.width() / 2 + "px",
         "marginTop": -main.height() / 2 + "px"
    });
}
var main = $('.main');
makeItCenter(main);
main.on('resize', makeItCenter);

<强> Working Fiddle

对于常见样式，请在其他答案中添加@ simey.me已建议的类。

Css：px与％没有相同的效果

3 个答案: