如何將頁面內容設置爲瀏覽器的中心？

我需要的是在瀏覽器中心顯示一個網頁的內容，無論它是什麼大小的屏幕大小，分辨率高低，它總是自動調整到瀏覽器的中心位置。在此先感謝如何將頁面內容設置爲瀏覽器的中心？

我的HTML和CSS代碼如下

HTML代碼

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="basic1.css"/> 
    </head> 
<body> 

    <div id="menu"> 
     <a href = "#"><img class="imgc" src="img.png" alt="icon"/></a> 
     <a href = "#"><img class="imgd" src="do.png" alt="do"/></a> 
    </div> 
     <div id="smenu"></div> 
    <div id="mainbox"> 
     <div class="ibox"></div> 
    </div> 
    <div id="menutext"> 
    <ul> 
     <li><a href="#"><b>???????</b></a></li> 
      <li><a href="#"><b>?????</b></a></li> 
     <li><a href="#"><b>?????</b></a></li> 
     </ul> 
    </div> 
    <div id="py"> 
     <pre class="p">??<span style="color:black;font-size:25px">??????</span></pre> 
     <pre class="s">?? ???? ??? ??? <span style="color:#980000; 
     letter-spacing :+1mm"><b>:3</b></span></pre> 
    </div> 

    </body> 
    </html>

CSS

#menu img.imgc { 
position:absolute; 
right:77%; 
top:10px; 
margin:0px auto; 
} 
#menu img.imgd { 
position:absolute; 
left:75%; 
top:10px; 
margin:0px auto; 
} 
#menu { 
position:absolute; 
left:0%; 
top:0%; 
right:0%; 
right:0%; 
width:100%; 
height:125px; 
border-bottom:1px solid #C8C8C8; 
margin:0px auto; 
background-color:#E8E8E8; 
} 
#mainbox div.ibox{ 
position:absolute; 
left:31%; 
top:20px; 
border-left:3px solid gray; 
height:105px; 
margin:0px auto; 
} 
#menutext ul{ 
position:absolute; 
right:72%; 
top:15px; 
list-style: none; 
line-height:30px; 
margin:0px auto; 
} 
#menutext a{ 
font-size:12px; 
font-variant:small-caps; 
font-family:Lucida,Helvetica,sans-serif; 
font-weight:500; 
color:black; 
text-decoration: none; 
text-align: left; 
} 
#py pre.p{ 
position:absolute; 
top:15px; 
left:33%; 
font-family:Tahoma, Geneva, sans-serif; 
letter-spacing : +2mm; 
font-size:50px; 
color:#009933; 
text-decoration: none; 
text-align: center; 
margin:0px auto; 
} 
#py pre.s{ 
position:absolute; 
top:67px; 
left:33%; 
font-family:Tahoma, Geneva, sans-serif; 
letter-spacing : +3mm; 
font-size:12px; 
color:gray; 
text-decoration: none; 
text-align: center; 
margin:0px auto; 
}

來源

2012-12-25 shuvo Oo

把所有的內容一個div內部，設置id't類container：

<div class="container"> 
    ... 
</div>

比使用CSS設置它的邊距自動：

.container{ 
    margin:0px auto; 
    width: 600px; 
}

看看at this jsfiddle

編輯

檢查this new fiddle的menu CSS不NEET大家寫的東西，應該是這樣的：

#menu { 
height:125px; 
border-bottom:1px solid #C8C8C8; 
margin:0px auto; 
background-color:#E8E8E8; 
}

來源

2012-12-25 07:59:19 Kuf

換個格周圍所有的內容（所以從右側後您的身體開始標記和身體結束標記之前）。說它<div class="container">

設置以下的風格到DIV：

width: 1000px; 
margin: auto;

這應圍繞你的內容。

您可以根據需要更改寬度。

來源

2012-12-25 07:55:33

將所有頁面內容放在一個包裝div中，然後給它一些相對寬度（例如50％）和自動水平邊距。

<div id="wrapper"> 
    <!-- CONTENT GOES HERE --> 
</div>

CSS（50％頁面寬度，零頂部/底部餘量）：

#wrapper { 
    width: 50%; 
    margin: 0 auto; 
}

來源

2012-12-25 07:55:45 n00dle

你可以使用fundation3的網格： http://foundation.zurb.com/docs/grid.php

來源

2012-12-25 08:09:33

工作解決方案。

<html> 
      <head> 
      <style type="text/css"> 
       html 
       { 
        width: 100%; 
        height: 100%; 
       } 

       body 
       { 
        display: flex; 
        justify-content: center; 
        align-items: center; 
       } 
      </style> 
     </head> 

     <body> 
      This is text! 
     </body> 
</html>

來源

2014-10-22 12:11:10 Vinayak

如何將頁面內容設置爲瀏覽器的中心？

回答

相關問題