align body to center - centering body

问题

hi i have a problem with absolute positioning , i want max/min-width/height and centering for page that has background; this is my css code but doesent work for centering ... i need align body to center with this coditions

css code :

body
 {
     position:absolute;
     font-family: "b nazanin","b roya", times new roman;
     font-size:16px;

         min-width:948px;
     min-height:550px;

     width:1280px;
     height:700px;


 }

html
{
     background: fixed -webkit-linear-gradient(red, blue); /* For Safari */
     background: fixed -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
     background: fixed -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
     background: fixed -webkit-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
     background: fixed linear-gradient(red, blue);

}

回答1:

min-width, min-height are used only when width and height is dynamic.

Check it no http://jsfiddle.net/Ur6ZR/8/

body {
    font-family:"b nazanin", "b roya", times new roman;
    font-size:16px;
    outline:10px solid white;
    margin:0 auto;
    min-width:948px;
    min-height:550px;
    width:100%;
    height:100%;
}
html {
    background: fixed -webkit-linear-gradient(red, blue);
    background: fixed -o-linear-gradient(red, blue);
    background: fixed -moz-linear-gradient(red, blue);
    background: fixed -webkit-linear-gradient(red, blue);
    background: fixed linear-gradient(red, blue);
}

See if it can help you.

回答2:

For centering the body, you just need this :

body{
     margin:0 auto;
     width:1000px;
}

This code works fine and with all browsers (Firefox, Chrome, IE[7-11], Opera(Presto too)). You not need nothing more (for this aim).
This code is an example. So, maybe you will need to make some (little) adjustment.

You shouldn't use position:absolute. This a bad way. Such as Mörre says, it doens't make a sense also to me. And I advice you also to reevaluate your approach. The position:absolute could be useful sometimes but for this case it's totally useless.

回答3:

Your probably better off using a <div> instead. Formatting the <html> tag is usually discouraged.

CSS:

body {
    background: fixed -webkit-linear-gradient(red, blue); /* For Safari */
    background: fixed -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: fixed -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: fixed -webkit-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: fixed linear-gradient(red, blue);
    border: 0; /* removes the default body border */
    font-family: 'b nazanin', 'b roya', Times New Roman;
    font-size: 18px;
}

div /* replace with the elements class */ {
    height: 700px;
    margin: auto; /* will cause the element to be center aligned */
    /* min-height and min-width are useless with a fixed height and width */
    width: 1280px;
}

And if you want a page with the content centered try this:

body {
    border: 0;
}

.wrapper {
    margin: auto;
    width: 960px; /* 960px is probably the max width you would want to use */
}

The Html would look like this:

<body>
    <div class="wrapper">
        <!-- content -->
    </div>
</body>

来源：https://stackoverflow.com/questions/20302893/align-body-to-center-centering-body

标签

html

css

css3