How do you make something in the center of the page in CSS? [duplicate]

问题

Possible Duplicate:
How is this put in the center using CSS?

I have tried so hard to put things in the center in CSS but I just dont get it!

I dont want to use <center></center>

So how else is it done?

回答1:

So what is the EASIEST, CLOSEST option to writing <center></center>?

Probably something like this:

element {
    display:block;
    text-align:center;
}

References:

Google Chrome stylesheet: http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css

center {
    display: block;
    /* special centering to be able to emulate the html4/netscape behaviour */
    text-align: -webkit-center
}

Firefox stylesheet: http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css
```
center {
    display: block;
    text-align: -moz-center;
}
```

Why not to use the `<center>` tag

It is a "presentational" tag that has absolutely no semantic value.
It is deprecated. While support for it may continue, it is not guaranteed (this is up to the browser vendor).
As a presentational tag, it makes very little sense to have to do something like:
```
center {
    text-align:left;
}
```

Presentation should always be delegated to CSS when possible (i.e. almost always).

There are a variety of ways to "center" different things in different ways, but this should emulate the <center> tags behavior.

回答2:

Use margin-left:auto;margin-right:auto;

回答3:

A quick trick to display elements centered on screen is using negative margin and absolute positioning.

An example:
- We need to display a div 500x200 centered on screen
- html <div id='center'>this is the content</div>
- css
.center { width: 500px; height: 200px; position:absolute; top:50%; left:50%; margin-left: -250px; margin-top: -100px }

回答4:

http://jsfiddle.net/BxyVb/

or if you want to center it by y axis too then just use a margin top in % value so it will be on sight on small and large screen

来源：https://stackoverflow.com/questions/7745881/how-do-you-make-something-in-the-center-of-the-page-in-css

标签

html

css

center