내 웹 사이트의 슬라이드 쇼를 화면 중앙에 배치하려면 어떻게해야합니까?

Question

나는이 CSS 스타일의 코드를 가지고 :이 3 선을 사용하는 경우

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 자동 추가 : 나는 몸에서 일부를 변경

/* 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; 
} 

너비와 여백이 없으면 슬라이드 쇼가 왼쪽 하단에 표시됩니다.

이제 슬라이드 쇼가 중간 상단에 표시됩니다. 하지만 난이 화면 중앙되지 중앙 상단에 있어야 할 :

Middle Top

내가 추가/변경해야하는 사항은 무엇입니까?

Answer 1

이 시도 :

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

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

Answer 2

나는 가운데 부분이 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 3

내가 속성 스타일을 사용하고 위쪽에서 여백 ... 예를 들어 를 설정 한 다음은 .. 스타일링 을 div 태그를 사용할 수

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