Css 使div在页面上居中

我需要div在任何时候都在页面的中心，无论用户是否调整网页大小

我试过使用： 保证金：自动； 保证金：0自动； 左边距：自动；右边距自动

但这三个都不起作用

HTML:

这里有一把小提琴作为我所说的例子。

---

谢谢。

删除

位置：固定
，将
宽度更改为
50px
，并确保在
页边距：auto
中的
auto
之前有一个
0

更新：

要使div与窗口一样高，请确保将
body
和
html
设置为
height:100%太：

body, html {
  height: 100%:
}

此HTML：

<div id="grayinnerbackground">
    foo
</div>

直到我把文本放到div中，检查了一些东西，我才完全确定它为什么不起作用

更新

唉，好吧，我累了。如果div为空，并且高度为100%，那么它将是其父级高度的100%，在本例中为
。由于没有其他内容，
的高度为0。给
一个绝对高度，它会弹出：

div#grayinnerbackground {
            margin: auto;
            width: 50px;
            background-color: #ccc;
            height: 10px;
}

你可以用

position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */

演示：
如果您确实希望头寸固定，请添加以下规则并放弃常用的保证金技巧：

left: 50%;
margin-left: -25px; // half the width of your element

请参见此处：
使用：

position: relative 

如果仍然不起作用，您可能还需要添加以下内容：

display: block;

“位置：固定”意味着无论它保持在x和y坐标上。
您可以试试这个

div#grayinnerbackground {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 50px;
    background-color: #D9D9D9;
    height: 100%;
}


关于在这里工作的更多信息：
唯一的问题是我需要固定它，需要宽度，需要100%的页面高度。。。此外，我还尝试了边距：0自动；什么都没有。有关如何将div延伸到页面底部的信息，请参阅我的更新答案。当您将文本放入div时，它会起作用，因为文本为div提供了实际显示所需的高度。这也可以通过给潜水舱一个固定的高度来实现。你说得对，先生。我不应该在喝了几杯啤酒后再编码：）这很好用，除了我使用了-25px。我仍然在考虑每个人的建议，以找到一个更干净的方式，但现在我很高兴。非常感谢Jeffman和其他人。注意：使用固定定位确实会让以后的事情变得困难。根据您的需要，您可能需要重新考虑不同的方法。
position: relative 

display: block;

div#grayinnerbackground {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 50px;
    background-color: #D9D9D9;
    height: 100%;
}