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

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 的宽度，您可以使用负的 margin-left 作为水平位置(等于宽度的一半)。

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

JSFiddle

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

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