任何瀏覽器的中心內容

我有以下的CSS。它需要的任何屏幕上居中，但當前只集中在某一種畫面：任何瀏覽器的中心內容

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); 

    html{ 
    /* font-family: 'Roboto Condensed', sans-serif;*/ 
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
     font-weight: 20; 
    } 

    #description{ 
     position: absolute; 
     top: 200px; 
     left: 400px; 
    } 
    #content{ 
     margin: 0 auto; 
     height: 100%; 
     width: 100%; 
     text-align: center; 
     line-height: 100%; 
     display:table-cell; 
     vertical-align: middle; 
    } 
    h1{ 
     color:#4A4A4A; 
     margin: 0 auto; 
     text-align: center; 
    } 
    h1:hover{ 
     color:#4A4A4A; 
    } 
    h2{ 
     color:#4A4A4A; 
     margin: 0 auto; 
     text-align: center; 
    } 
    h2:hover{ 
     color:#4A4A4A; 
    } 
    a{ 
     color:black; 
     text-decoration: none; 
     margin: 0px auto; 
     width: 400px; 
    } 
    .circular{ 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
     width: 150px; 
     height: 150px; 
     border-radius: 75px; 
     -webkit-border-radius: 75px; 
     -moz-border-radius: 75px; 
     background: url(./images/profile_picture.jpg) no-repeat; 
     box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
     -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
     -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
    } 

    ul{ 
     padding: 0; 
     text-align:center; 
     padding-top: 5 
    } 
    ul a img { 
     padding-top: 20px;  
    } 
    li{ 
     list-style: none; 
     text-align: center; 
     font-size: 30px; 
     display: inline-block; 
     margin-right: 10px; 
    } 

    #back{ 
     position:absolute; 
     top:0; 
     left:0; 
     bottom:0; 
     right: 0; 
     z-index: -99999; 
     background-color: #f7f7f7; 
     background-size: cover; 
     background-position: center center; 
     opacity: .2; 
    }

目前我只能網站4x3的一個屏幕上的中心。我怎樣才能調整我的CSS以任何大小的屏幕爲中心？

編輯：同一問題is here與HTML。

來源

2014-02-09 user2604504

HTML在哪裏？在jsfiddle中提供HTML。 –

您還沒有發佈HTML代碼（不知道爲什麼（？））！

好招用CSS來中心的元素是爲了給元素的auto

#wrapper 
{ 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
}

左右邊距值。這也類似於margin:0 auto被廣泛使用！

使用<div id="wrapper">...</div>包裝您的內容並設置寬度！

要將圖像居中，請將display:block添加到圖像中，因爲默認情況下圖像具有display:inline屬性。

#myImage 
{ 
    width: 50px; 
    height: 50px; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
}

來源

2014-02-09 07:21:12

更新：從Magesh庫馬爾答案是更好的，但是這仍然有效。

沒有看到您的網頁上的代碼，這是有點困難。但要在任何屏幕上對齊DIV，您應該使用以下代碼：

#divID { 
    position: absolute; 
    width:400px; 
    left:50%; 
    margin-left:-200px; /*This should always be 50% of your width*/ 
}

然後，您應該將網站的其餘部分包裝到DIV中。

<div id="divID"> 
    YOUR WEBSITES CONTENT GOES HERE 
</div>

來源

2014-02-09 07:22:15 Tomn8r

包裝你的內容，設置寬度，並增加保證金：0汽車在保鮮的CSS

<div id="body"> 
    <div id="wrap"> 
     <div id="center">Center</div> 
    </div> 
</div> 

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

Fiddle

來源

2014-02-09 07:34:22

在HTML首先定義DIV的ID爲：

<div id="page"> 
website content 
</div>

然後在CSS中：設置寬度，並添加邊距：0 #page { margin:0 auto; width:50%; }

來源

2014-02-09 08:54:07

任何瀏覽器的中心內容

回答

相關問題