任何浏览器的中心内容

我有以下的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

任何浏览器的中心内容

回答

相关问题