Trying to center content on any browser

问题

I have the following HTML and CSS here http://jsfiddle.net/XQ5c9/. I am trying to center all of my content on any screen size/browser. Currently, everything is off center and a bit to the left on all the screens I can test on. Here is my CSS (both HTML and CSS are in the jsfiddle link):

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

Any help helping me figure out how to center all my content would be greatly appreciated.

回答1:

You might want to use margin auto...

loose the position absolute stuff In your main div and put:

margin-top: 50%; margin-left: auto; margin-right: auto;

You might use line-height instead of margin-top.

回答2:

Well the trick to center an element with CSS is to give the element a left and right margin value of auto

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

This is also similar to margin:0 auto which is widely used !

Wrap your content using a <div id="wrapper">...</div> and set a width !

To center an image, add display:block to it since by default the images have display:inline property.

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

回答3:

You can use Javascript to find the screen's dimensions and then calculate where to position the div element. Here is the Javascript code:

<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>

来源：https://stackoverflow.com/questions/21656559/trying-to-center-content-on-any-browser