CSS中心位置：绝对背景

Question

我正在尝试始终使“ sp”和“ bg” div居中，但我似乎做不到。 它居中直到窗口的宽度超过图像的宽度。 之后，图像停留在页面左侧。 我要更改的只是图像应该以所有宽度移动到页面的中心。 理想的答案是保持位置：绝对。

谢谢！

<div id="slider-wrapper">
    <div id="slider">
            <div class="bg"> <width="100%" height="100%"/></div>
            <div class="sp"> <img src="../imgs/01_done.png" width="100%" height=100%"/></div>
    </div>
</div>

CSS：

#slider-wrapper{display:none;height:100%;position:fixed;width:100%;z-index:1000000}
#slider {position:fixed;width:100%;height:100%}
#slider .bg {position:absolute; max-height: 100%; display: none;} 
#slider .sp {position:absolute;z-index:10000; max-height: 100%; display: none;}

编辑：减少一些代码以使其更简单。

Answer 1

就这么简单：

.bg, .sp {margin: 0 auto; width: n px;}

Answer 2

如果要使css中的元素居中，则可以使用margin子句：

#centred
{
margin-left: auto;
margin-right: auto;
width:100px;
}

至于背景，如果您想要元素的背景，则还可以使用上面的代码，并定义height属性。

希望这可以帮助 ：）

Answer 3

CSS

首先，清理CSS并摆脱绝对定位，这在以后的开发中将成为真正的痛苦。 <-除非绝对必要

清理HTML删除容器，为什么要使用这些容器？ 您无需在CSS中重新声明100％。 另外，％的问题是他们需要一个类似1000px的引用来知道相对缩放的比例。

CSS

#slider-wrapper{
clear:both;
position: relative;
max-width: 1000px;
width: 100%;
}

#slider{
    position: relative;
    width:100%
    height:100%
    }

    .sp,
    .bg {
    width:100%; 
    height:100%;
    margin: 0 auto;
    }

Answer 4

试试看： http : //jsfiddle.net/sHnmx/

.bg, .sp {margin: 0 auto; width: 10%;}

并以像素为单位以css为单位给出图像的宽度（代替宽度，给出图像的宽度）。