如何将<div>与页面的中间（水平/宽度）对齐\[重复\]

如何将

与页面的中间（水平/宽度）对齐\[重复\]</p>

CSS

Gil小哥

2020-03-16

我有一个设置为800像素的div标签。当浏览器宽度大于800像素时，不应拉伸，但应将其带到页面的中间。widthdiv

</div>

第1681篇《如何将

与页面的中间（水平/宽度）对齐\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>

共23个回答

Davaid阿飞 2020.03.16

For some reason, none of the previous answers worked for me really. This is what worked for me and it works across browsers 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;
}

伽罗神奇 2020.03.16

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

神乐Mandy 2020.03.16

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

小胖西里 2020.03.16

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

/* it brings div to center */

Davaid飞云 2020.03.16

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

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

阿飞神无 2020.03.16

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>

十三LEY 2020.03.16

This also works in Internet Explorer, but auto margins do not.

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

Jim米亚西里 2020.03.16

Some other pre-existing setups from older code that will prevent div page centering L&R are:

Other classes hidden in external stylesheet links.
Other classes embedded in something like an img (like for older external CSS print format controls).
Legend code with IDs and/or CLASSES will conflict with a named div class.

宝儿猿 2020.03.16

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

Tony西门古一 2020.03.16

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

乐JinJin 2020.03.16

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 the "body" tag is only for an example. In a real project you may remove this property.

小小乐 2020.03.16

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>

JinJin小胖 2020.03.16

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

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

This worked for me with all the browsers I have tried.

凯Tom泡芙 2020.03.16

This can be easily achieved via flex container.

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

.item{
 align-self: center;
}

Preview Link

宝儿L 2020.03.16

Add this class to the div you want centered (which should have a set width):

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

Or, add the margin stuff to your div class, like this:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

A达蒙 2020.03.16

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

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

猿GO 2020.03.16

Div centered vertically and horizontally inside the parent without fixing the content size

Here on this page is a nice overview with several solutions, too much code to share here, but it shows what is possible...

Personally I like this solution with the famous transform translate -50% trick the most. It works well for both fixed (% or px) and undefined height and width of your element.
The code is as simple as:

HTML:

<div class="center"><div>

CSS:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */

  /* optional size in px or %: */
  width: 100px;
  height: 100px;
}

Here a fiddle that shows that it works

飞云Jim 2020.03.16

You can also use it like this:

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

梅Tony 2020.03.16

<div></div>

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

十三村村蛋蛋 2020.03.16

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>

神无Jim小哥 2020.03.16

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

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

村村Green 2020.03.16

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

Gil蛋蛋 2020.03.16

position: absolute然后top:50%和left:50%地方在屏幕的垂直中心处的水平中心左侧边缘的顶部边缘，并且，然后通过加入margin-top到div的高度的负的，即，-100移位它上面由100同样地，对于margin-left。这div恰好位于页面的中央。

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