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和put：

保证金最高限额：50％; margin-left：auto; margin-right：auto;

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

Answer 2

使用CSS将元素居中的技巧是给元素一个左右边距值auto

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

这也类似于margin：0 auto，它被广泛使用！

使用<div id="wrapper">...</div>包裹您的内容并设置宽度！

要使图像居中，请向其添加display：block，因为默认情况下图像显示为：inline属性。

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

Answer 3

您可以使用Javascript查找屏幕的尺寸，然后计算div元素的位置。这是Javascript代码：

<script type = "text/javascript">
            var obj = document.getElementById("description")

            //get screen dimensions
            var width = document.body.clientWidth
            var height = document.body.clientHeight

            //Get div element dimensions
            (document.body.clientHeight/2)-(appheight/2)+position
            var divwidth = parseInt(obj.style.width)
            var divheight = parseInt(obj.style.height)

            //Calculate positions
            var x = (width-divwidth)/2
            var y = (height-divheight)/2

            //Assign positions to div
            obj.style.top = y
            obj.style.left = x
            </script>

尝试将内容集中在任何浏览器上

3 个答案: