Question

我想以div为中心，但同时可以在我的代码中使用top: 100px;之类的东西。这可能吗？我注意到，如果我说position: fixed;，则顶部/底部样式会起作用，但margin-left: auto和margin-right: auto会被禁用。如何同时获得这两个功能？谢谢！

Answer 1

根据您使用它的方式，最简单的方法可能是使用两个元素：一个具有固定位置的“不可见”元素和一个居中的内部元素。像这样：

http://jsfiddle.net/CCqUn/

<div>
    <p>Test</p>
</div>

div {
    position:fixed;
    top:100px;
    width:100%;
    height:0; /* In case of z-index issues; this element should be "hidden" */
}
div p {
    width:200px;   
    margin:0 auto;
    background:#CCC;
}

Answer 2

http://jsfiddle.net/nb6zY/2/

设置固定元素的边距将起作用，而不是“自动”。在创建模态时，我经常使用以下技术：

div {
  width:100px;
  position:fixed; 
  top:100px;
  left:50%; 
  margin-left:-50px;
}

仅当您知道要居中的div的宽度时才有效。诀窍是将margin-left设置为div宽度的负“half”。

Answer 3

我很想使用一个包含元素（99％的时间为div），以及边距/填充，而不是顶部坐标（相对于其他元素而言，它更倾向于精确定位位置和大小是已知的）。请查看以下内容：

<div class="container">
    <div class="content">
        Some content in here..!
    </div>
</div>

...然后是CSS：

.container
{
    width: 100%;
}

.content
{
    width: 200px;
    background-color: ORANGE;

    /* set it to the center of the container, plus move it down */
    /* using 100px for the top margin */
    margin: 100px auto 0px;
}

这会将左右边距设置为auto，保留下边距0px，并设置上边距100px。

显然，对于元素的中心定位，0px auto边距设置是最好的，但是如果你知道你想要定位元素的确切坐标，相对于容器，您也可以尝试以下（CSS）：

.container
{
    width: 100%;
    position: relative;
}

.content
{
    width: 200px;
    background-color: ORANGE;

    /* exact coordinates, relative to the container (parent) */
    position: absolute;
    top: 100px;
    left: 100px;
}

希望这有帮助！

中心div并给他们顶/底定位？

3 个答案: