如何将 div 对齐页面的中间部分(水平 / 宽度)[ duplicate ]

问题描述：

This question already has an answer here:

How to horizontally center a <div>? 90 answers

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.

</div>

转载于:https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page

答

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

答

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

答

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.

答

This works in IE also, Auto Margins do not.

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

答

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

答

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.

答

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.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}

<div id="outPopUp"></div>

</div>

答

You can also use it like this:

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

答

<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

答

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

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}

答

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.

答

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

答

<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 and you can arrange the content as per your need. There is no need to give the width and other parameters.

答

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

答

.middle {
   margin: auto;
   text-align: center;
}

答

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>

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

答

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>

</div>

答

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

</div>

答

This can be easily achieved via flex container.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

Preview Link

答

In my case, the phone screen size is unknown, here is what I did.

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border:0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JS(before you need to show this DIV)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show();

答

get the width of the screen than make margin left 25% make margin right 25% in this way the content of your container will sit in the middle . example : suppose that container width = 800px; <

div class='container' width='device-width' id='updatedContent'> 
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}

答

<parent>
 <child>
 </child>
</parent>

parent { position: relative } child { position: absolute, left: 50%, transform: translateX(-50%) }

如何将 div 对齐页面的中间部分(水平 / 宽度)[ duplicate ]

相关推荐