Question

我的页面上有一些带有一些文字的div，我希望它在底部。我是使用固定定位：

完成的

div#popup{
    position: fixed;
    bottom: 0;

但我也希望它集中在一起。我尝试给它宽度为40％和自动边距，但这不起作用（它不适用于上述代码的组合）：

 div#popup{
    position: fixed;
    bottom: 0;
    width: 40%;
    margin-left: auto;
    margin- right: auto;

我怎样才能做到这一点？

感谢。

Answer 1

如果你知道div的宽度，你可以使用负边距 - 左边的水平位置（等于宽度的一半）。

div {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 40%;
    height: 30px;
    margin-left: -20%;
    background: blue;
}

JSFiddle

如果您不知道宽度，只需使用包装器和内联块：

HTML：

<section>
    <div>la-la-la</div>
</section>

CSS：

section {
    position: fixed;
    bottom: 0;

    width: 100%;

    text-align: center;
}

div {
    display: inline-block;
    border: 1px solid red;
    color: red;
}

JSFiddle

Answer 2

我鼓励您查看两个不错的教程（快速阅读）：

http://www.barelyfitz.com/screencast/html-training/css/positioning http://learnlayout.com/position.html

我认为你需要描述这样的立场：

div#popup{
    position: fixed;
    bottom: 0;
    right: 50%;
}

Answer 3

首先，你不应该使用固定定位让你的页脚粘到底部。要使页脚粘到屏幕底部，将所有div设置为relative，然后在内容和页脚之间添加一个与页脚相同的高度（设置页脚高度）。然后在你的内容div上加上一个负高度的余量。完美的工作。

要使其居中，请使用宽度自动和左右自动边距或仅使用文本对齐中心

如何使<div>居中并让它使用固定定位？

3 个答案: