CSS 在 100% 宽度的幻灯片上居中对齐 div答案

【问题标题】：CSS center align div on top of 100% width slideshowCSS 在 100% 宽度的幻灯片上居中对齐 div
【发布时间】：2014-06-01 01:53:48
【问题描述】：

我有下面的幻灯片，它是屏幕宽度的 100%。我需要将banner_slideshow_controls div放在中间。

我尝试将幻灯片的主容器设置为相对，然后将 div 设置为绝对，但除非我在幻灯片上设置宽度和边距：0 auto，否则它不会位于中间，我无法按需要执行它是 100%。

谁能建议解决这个问题？

    <div id="banner_slideshow_container">
                    <div id="banner_slideshow">
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner1.jpg)"></a>
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner2.jpg)"></a>
                        <a href="about-us.php"  style="background-image: URL(ui/banners/banner3.jpg)"></a>
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner4.jpg)"></a>
                        <a href="about-us.php" style="background-image: URL(ui/banners/banner5.jpg)"></a>
                    </div>
                    <div id="banner_slideshow_controls">
                        <div class="slideshow_caption">TEXT FOR BANNER</div>
                        <div class="slideshow_button">More Information</div>
                            <div id="prev" class="img_replace">Previous</div>
                            <div id="next" class="img_replace">Next</div>
                  </div>     
                </div>

#banner_slideshow_container {
    width: 100%;
    height: 366px;
    margin-top: 339px;
    background-color:#ccc;
}

#banner_slideshow {height:366px}

#banner_slideshow a{
    width:100%;
    height:100%;
    display:block;

}


#banner_slideshow_controls {
position:relative;
top:-100px;
margin: auto 0;
width:900px;
 z-index:10;
border:2px solid green

}

非常感谢，

【问题讨论】：

标签： html css

【解决方案1】：

如果要水平居中，左右边距必须为auto，所以margin: 0 auto，或更短margin: auto（因为默认div边距为0）

或者如果你想使用绝对位置，添加到#banner_slider_container position: relative 并且你可以绝对定位（如果你不知道容器宽度，你可以使用left: 50%; margin-left: -450px）

【讨论】：

【解决方案2】：

margin: x y 是 -

的简写

margin-top: x
margin-bottom: x
margin-right: y
margin-left: y

如果我正确理解了要求 - 在#banner_slideshow_controls 上设置margin : 0 auto 而不是相反的方式

通过这样做，您将左侧、右侧边距设置为“自动”，将顶部、底部边距设置为 0 - 这会将 div 置于中间。

【讨论】：