问题描述:

I have a div tag with width set to 800px. When the browser width is greater than 800px, it shouldn't stretch the div but it should bring it to the middle of the page.

网友答案:
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
网友答案:

position: absolute and then top:50% and left:50% places the top edge at vertically center of the screen, and left edge at horizontally center, then by adding margin-top to negative of height of the div i.e -100 shifts it above by 100, similarly for margin-left. This gets div exactly in the center of the page.

<div id="outPopUp"></div>
#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
网友答案:
  1. Do you mean that you want to center it vertically or horizontally? You said you specified the height to 800px, and wanted the div not to stretch when the width was greater than that...

  2. To center horizontally, you can use the margin: auto; attribute in css. Also, you'll have to make sure that the body and html elements don't have any margin or padding:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
网友答案:

To make it also work correctly in Internet Explorer 6 you have to do it as following:

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
网友答案:

Modern Flexbox solution is the way to go in/from 2015. justify-content: center is used for the parent element to align the content to the center of it.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

Output

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>
网友答案:

You can also use like this..

<div style="width: 60%; margin: 0px auto;">
         Your Contents Here...
</div>

Hope this may helpful to some one.,

网友答案:
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
网友答案:

Simply use center tag just after body tag, and end center tag just before body ends

<body>
<center>
........your code here.....
</center>
</body>

This worked for me with all the browsers I have tried

网友答案:

Use css flex property: http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}
网友答案:

i am a little late to the game, but i don't see this answer and this is what i use. you can add this class to your div (which should have a set width) or add the margin stuff to your div class

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

OR

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}
网友答案:

Some other pre-existing setups from older code that will prevent div page centering L&R are: 1) other classes hidden in external stylesheet links. 2) other classes embedded in something like an img (like for older external CSS Print format controls). 3) legend code with IDs and/or CLASSES will conflict with a named div class.

网友答案:

If you have some regular content and not only one line of text, so only possible reason I know is to calculate margin.
Here is an example:

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

So, #supercontainer is your "whole page" and it's width is 1200px.
#middlecontainer is div with content of your site; it's width 102px. In case, the width of content is known, you need to divide page's size to 2, and substruct from result half of content's width:
1200 / 2 - (102 / 2) = 549;

Yes, I'm also see that this is DER GROSSE fail of CSS.

网友答案:

Centering without specifying div width:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

This is something like <center> tag does, except:

  • all direct inline childs elements (eg. <h1>) of <center> will also positioned to center
  • inline-block element can have different size (comapred to display:block setting) according to browser defaults
网友答案:

This works in IE also, Auto Margins do not.

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}
网友答案:

Div centered vertically and horizontally inside parent without fixing content size

Check out this example (click). Very simple, and works for flexible heights too. Perfect if you don't have content with fixed height.

And here (click) is a nice overview with some other solutions.

And here (click) another example with a flexible width solution with the famous -50% trick

网友答案:
body, html{
    display:table;
    height:100%;
    width:100%;
}
.container{
    display:table-cell;
    vertical-align:middle;
}
.container .box{
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;

}

http://jsfiddle.net/NPV2E/

"width:100%" for "body" tag it's only for example. In real project you may remove this property.

网友答案:

Simple http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}
网友答案:
<body>
<div style=" display: table; margin: 250 auto;">
    In Center
</div></body>

If you want to change the vertical position, change the value of 250 & you can arrange the content as per your need.No need to give the width & other parameters.

网友答案:
.middle {
   margin: auto;
   text-align: center;
}
网友答案:

Use justify-content and align-items to horizontally and vertically align a div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>
网友答案:

A pretty old question with a lot of answers, but for some reason none of them worked for me really. This is what worked for me and it works across browser as well:

.center {
    text-align: center;
    height: 100%;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
}
网友答案:

If your center content is deep inside other divs then only margin can save you. Nothing else. I face it always when not using framework like Bootstrap.

网友答案:

You below code for centering the div box

.box-content{
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 800px;
  height: 100px;
  background-color:green;
  }
<div class="box-content">
  </div>
网友答案:

The next solution worked great for me, I created a div that margin 50% from the page to the left and wrap it with another div that calculate the extra div width:

<div style="margin-left: -200px;">
<div style="margin-left: 50%; width: 400px">
     centered content
</div>
</div>
相关阅读:
Top