Question

我用这个css来固定一个固定的<div>块。但它出现在<body>的左下角。有什么问题？

#console {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 16px;
    
    margin: 0  auto;
    position: fixed;
    bottom: 0;
    }

<div id="console">Example</div>

Answer 1

问题是因为您在元素上设置了FROM，这意味着它已从正常的文档流中取出，而position: fixed不会对其进行处理。< / p>

相反，您可以设置margin: 0 auto，然后设置负left: 50%等于宽度的一半。试试这个：

margin-left

Answer 2

试试这个。

margin: 0 auto;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100px // however wide you want it to be

您已完成固定定位，从正常页面流中删除该项目。默认情况下，它们左侧为0。

因为您使用了固定定位，margin: 0 auto的工作方式与普通文档流中的元素（例如静态）的工作方式不同。您必须使用绝对定位，相对于最接近绝对或相对定位父项的项目。

Answer 3

我会选择：

position: fixed;
bottom: 0;
width: 100px;
left: calc(50% - 50px); // 50px is half of 100px

实例：

#console {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    font-size: 16px;
    
    position: fixed;
    bottom: 0;
    width: 100px;
    left: calc(50% - 50px); // 50px is half of 100px
}

<div id="console">Example</div>

请注意calc requires modern browsers。有关calc的更多信息：MDN，spec

这样你就可以说元素应该是从底部开始的0px，它应该在屏幕的中间（但你需要考虑到元素有一些宽度，因此减去50px）。

http://howtocenterincss.com/ - 了解CSS中心是非常好的（尝试猜测在你看到结果之前你会怎么做：））

Answer 4

固定位置与您以元素为中心的边缘碰撞。试试左：50％;而不是margin：0 auto;

正确定位固定的<div>元素

4 个答案: