Question

我有以下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以适合任何尺寸的屏幕？

编辑：与HTML一样的问题is here。

Answer 1

您尚未发布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;
}

Answer 2

更新： Magesh Kumaar 的答案更好，但这仍然有效。

如果没有看到您网页上的代码，就会有点困难。但是要在任何屏幕上居中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>

Answer 3

包装你的内容，设置宽度，并添加保证金：0自动包裹的css

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

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

Fiddle

Answer 4

首先在HTML中将Div ID定义为：

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

然后在CSS中：设置宽度，并添加边距：0 #page { margin:0 auto; width:50%; }

任何浏览器的中心内容

4 个答案: