html - 尝试将内容置于任何浏览器的中心

Question

我这里有以下 HTML 和 CSS http://jsfiddle.net/XQ5c9/ .我试图将我的所有内容集中在任何屏幕尺寸/浏览器上。目前，在我可以测试的所有屏幕上，一切都偏离中心并偏左。这是我的 CSS(HTML 和 CSS 都在 jsfiddle 链接中):

@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;
    }

如果能帮助我弄清楚如何将我的所有内容居中，我们将不胜感激。

Answer 1

你可能想使用 margin auto...

放开位置绝对的东西在你的主 div 中并放置:

上边距:50%；左边距:自动；右边距:自动；

您可以使用 line-height 而不是 margin-top。