Question

我试图保持＆＃34; sp＆＃34;和＆＃34; bg＆＃34; 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并摆脱绝对定位，它在以后的开发中变成了真正的痛苦。＆lt; - 除非绝对必要

清理HTML删除容器为什么有这些？如果它在CSS中，你不需要重写100％。此外，％＆＃39; s的问题是他们需要像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%;}

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

CSS中心位置：绝对背景

4 个答案: