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 {
        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自动如果我使用这3行没有宽度和边距，则幻灯片显示在左下角。

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

Middle Top

我应该更改/添加什么？

Answer 1

我假设你的中间部分是300px宽度和300px高度。

   body {
    font:normal 85%/150% "segoe ui",helvetica,sans-serif;
    background-image: url("CB1.html");
    position:fixed; 
    top: 50%; 
    left: 50%;
    margin-top:-150px; /* 50% of the exact height */
    margin-left:-150px; /* 50% of the exact width */
    }

Answer 2

您可以使用div标签进行样式设置.. 下面我使用了属性样式并从顶部设置了边距... 例如，

<div style="margin-top:200px">Your slideshow content </div>

Answer 3

试试这个：

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

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

如何将我网站中的幻灯片显示放在屏幕中央？

3 个答案: