css - 我怎样才能使我网站上的幻灯片居中显示在屏幕中央？

Question

我有这个 css 样式代码:

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,dl,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img,fieldset {
    border:none;
}

hr {
    display:none;
    /*
        HR in my code are for semantic breaks in topic/section, NOT
        style/presenation, so hide them from screen.css users
    */
}

@media (max-width:600px) {
    * {
        -webkit-text-size-adjust:none;
        -moz-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

body {
        font:normal 85%/150% "segoe ui",helvetica,sans-serif;
        background-image: url("CB1.html");
        //position:fixed; //(relative, absolute, static*) 
        //top: 120px; 
        //left: 120px;
        //bottom: 120px;
        width: 960px; margin: 0 auto;
}

.ss_scripted img {
    display:none;
}

.ss_scripted .ss_show {
    display: block;            
}

#slideShow img {
    margin:0 auto;
}

#slideCounter {
    text-align:center;
    padding:0.25em 1em;
    font:bold 200%/120% consolas,courier,monospace;
    color:#C00;
}

#slideControls {
    width:512px;
    padding:0.5em 0;
    margin:0 auto;
}

#slideControls a {
    float:left;
    padding:0.25em 0.6em;
    text-decoration:none;
    color:#000;
    background:#EEE;
    border:2px solid #666;
    -webkit-border-radius:1em;
    -moz-border-radius:1em;
    border-radius:1em;
    -webkit-box-shadow:
        inset 0 -0.5em 1em rgba(0,0,0,0.3),
        0 0 1px #000;
    -moz-box-shadow:
        inset 0 -0.5em 1em rgba(0,0,0,0.3),
        0 0 1px #000;
    box-shadow:
        inset 0 -0.5em 1em rgba(0,0,0,0.3),
        0 0 1px #000;
}

#slideControls a:active,
#slideControls a:focus,
#slideControls a:hover {
    background:#FFF;
}

#slideControls .next {
    float:right;
}

我改变了 body 的部分:

body {
        font:normal 85%/150% "segoe ui",helvetica,sans-serif;
        background-image: url("CB1.html");
        //position:fixed; //(relative, absolute, static*) 
        //top: 120px; 
        //left: 120px;
        //bottom: 120px;
        width: 960px; margin: 0 auto;
}

未标记 3 行并添加宽度和边距 0 auto如果我使用这 3 行没有宽度和边距，则幻灯片显示在左下角。

现在幻灯片显示在中间顶部。但我希望它位于屏幕中心而不是中间顶部:

Middle Top

我应该更改/添加什么？

Answer 1

试试这个:

<div id="slides">
     <--! slider here -->
</div>

#slides{
   margin-right: auto;
   margin-left: auto;
   display: block
}