关于html：如何水平居中
？


How to horizontally center a

?

如何使用CSS在另一个中水平居中？

1
  Foo foo
相关讨论

您可以将此CSS应用于内部：

1
2
3
4
#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将width设置为50%。任何宽度小于包含的宽度都可以。 margin: 0 auto是实际居中的原因。

如果你的目标是IE8 +，那么最好改为：

1
2
3
4
#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定的width即可工作。

这里的工作示例：

1
2
3
4
5
6
7
8
9
10
#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
1
  Foo foo

相关讨论
1
    Foo foo

这使得内部div成为可以用text-align居中的内联元素。

相关讨论

最好的方法是使用CSS 3。

盒子型号：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
1
  Foo foo

根据您的可用性，您还可以使用box-orient, box-flex, box-direction属性。

柔性：

1
2
3
4
5
6
7
#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

阅读有关居中子元素的更多信息

  • 链接2

  • 链接3

  • 链接4

这解释了为什么盒子模型是最好的方法：

  • 为什么W3C盒型号更好？
相关讨论

假设您的div 200px宽：

1
2
3
4
5
.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

确保父元素定位，即相对，固定，绝对或粘性。

如果您不知道div的宽度，可以使用transform:translateX(-50%);而不是负边距。

https://jsfiddle.net/gjvfxxdj/

相关讨论

我已创建此示例以显示如何垂直和水平align。

代码基本上是这样的：

1
2
3
#outer {
  position: relative;
}

和...

1
2
3
4
5
6
7
8
#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

即使重新调整屏幕大小，它也会保留在center中。

相关讨论

一些海报已经提到了CSS＆nbsp; 3使用display:box进行居中的方式。

此语法已过时，不应再使用。 [另见本文]。

因此，为了完整起见，这是使用Flexible Box布局模块在CSS＆nbsp; 3中居中的最新方式。

所以如果你有简单的标记，如：

1
2
3
  A
  B
  C

...并且您希望将项目置于框中，这是您在父元素(.box)上所需的内容：

1
2
3
4
5
6
.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
1
2
3
  A
  B
  C

如果您需要支持使用较旧语法的旧版浏览器，这里是一个很好看的地方。

相关讨论

如果您不想设置固定宽度而不想要额外的边距，请将display: inline-block添加到元素中。

您可以使用：

1
2
3
4
#element {
    display: table;
    margin: 0 auto;
}
相关讨论

如果不给它宽度，它就不能居中，否则默认情况下整个水平空间。

相关讨论

以未知高度和宽度为中心

水平和垂直。它适用于相当现代的浏览器(Firefox，Safari / WebKit，Chrome，Internet＆nbsp; Explorer＆nbsp; 10，Opera等)

1
2
3
4
5
6
7
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
1
This works with any content

在Codepen或JSBin上进一步修补它。

相关讨论

CSS3的box-align属性

1
2
3
4
5
6
7
8
#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
相关讨论

设置width并将margin-left和margin-right设置为auto。但这仅适用于横向。如果你想要两种方式，你只需要两种方式。不要害怕尝试;它不像你会打破任何东西。

我最近不得不将一个"隐藏"的div(即display：none;)居中，其中有一个表格形式，需要在页面上居中。我写了下面的jQuery来显示隐藏的div＆amp;然后将CSS更新为表格的自动生成宽度，并更改边距以使其居中。 (通过单击链接触发显示切换，但不需要显示此代码。)

注意：我正在分享此代码，因为Google将我带到了Stack Overflow解决方案＆amp;一切都会有效，除了隐藏的元素没有任何宽度＆amp;在显示之前，不能调整大小/居中。

1
2
3
$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
1
2
3
4
5
6
7
8
9
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>

我通常这样做的方式是使用绝对位置：

1
2
3
4
5
6
7
#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

外部div不需要任何额外的财产来实现这一点。

相关讨论

对于Firefox和Chrome：

1
  Text

对于Internet＆nbsp; Explorer，Firefox和Chrome：

1
  Text

text-align:属性对于现代浏览器是可选的，但在Internet浏览器Quirks模式中对于旧版浏览器支持是必需的。

相关讨论

这是我的答案。

1
2
3
4
5
6
7
8
#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
1
  Inner Content

不必为其中一个元素设置宽度的另一个解决方案是使用CSS 3 transform属性。

1
2
3
4
5
6
7
8
9
10
#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

诀窍是translateX(-50%)将#inner元素设置为其自身宽度左侧的50％。您可以使用相同的技巧进行垂直对齐。

这是一个显示水平和垂直对齐的小提琴。

有关Mozilla Developer Network的更多信息。

相关讨论

Chris Coyier在他的博客上撰写了一篇关于"未知中心"的精彩文章。这是多种解决方案的综合。我发布了一个未在此问题中发布的内容。它有更多的浏览器支持，然后是flexbox解决方案，而你没有使用display: table;，这可能会破坏其他东西。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

我意识到我已经很晚了，但这是一个非常受欢迎的问题，我最近发现了一种我在这里没有提到的方法，所以我想我会记录它。

1
2
3
4
5
6
7
8
9
#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

编辑：两个元素必须具有相同的宽度才能正常运行。

相关讨论

例如，请参阅以下链接和以下代码段：

1
2
3
4
5
6
7
8
9
10
11
12
13
div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
1
  Foo foo

如果父母下面有很多孩子，那么你的CSS内容必须像小提琴上的这个例子。

HTML内容看起来像这样：

1
2
3
4
5
6
7
8
9
     Foo Text
     Foo Text
     Foo Text
     
     
     
     
     
     Foo Text

然后在小提琴上看到这个例子。

仅水平居中

根据我的经验，水平居中框的最佳方法是应用以下属性：

容器：

  • 应该有text-align: center;

内容框：

  • 应该有display: inline-block;

演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
1
    Center this!

另见这个小提琴！

水平和水平居中垂直

根据我的经验，垂直和水平居中框的最佳方法是使用另一个容器并应用以下属性：

外容器：

  • 应该有display: table;

内部容器：

  • 应该有display: table-cell;
  • 应该有vertical-align: middle;
  • 应该有text-align: center;

内容框：

  • 应该有display: inline-block;

演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
1
      Center this!

另见这个小提琴！

最简单的方法：

1
2
3
4
5
6
7
8
#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
1
  Blabla

相关讨论

如果内容的宽度未知，您可以使用以下方法。假设我们有这两个元素：

  • .outer - 全宽
  • .inner - 未设置宽度(但可以指定最大宽度)

假设元素的计算宽度分别为1000px和300px。请按以下步骤操作：

  • 在.center-helper中包裹.inner
  • 使.center-helper成为内联块;它变成与.inner相同的尺寸，使其宽300px。
  • 相对于其父级推动.center-helper 50％;这将其左侧置于500px wrt。外。
  • 相对于其父级，向左推.inner 50％;这将其左侧置于-150px wrt。中心帮手，这意味着它的左边是500 - 150 = 350px wrt。外。
  • 将.outer上的溢出设置为隐藏以防止水平滚动条。

    • 演示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    body {
      font: medium sans-serif;
    }

    .outer {
      overflow: hidden;
      background-color: papayawhip;
    }

    .center-helper {
      display: inline-block;
      position: relative;
      left: 50%;
      background-color: burlywood;
    }

    .inner {
      display: inline-block;
      position: relative;
      left: -50%;
      background-color: wheat;
    }
    1
    2
    3
    4
    5
    6
    7
    8
          A div with no defined width
          <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Duis condimentum sem non turpis consectetur blandit.
              Donec dictum risus id orci ornare tempor.
              Proin pharetra augue a lorem elementum molestie.
              Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.
    </p>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .outer {
        overflow: hidden;
    }
    .center-helper {
        float: left;
        position: relative;
        left: 50%;
    }
    .inner {
        float: left;
        position: relative;
        left: -50%;
    }

    这是你想要的最短的方式。

    的jsfiddle

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #outer {
        margin - top: 100 px;
        height: 500 px; /* you can set whatever you want */
        border: 1 px solid# ccc;
    }

    #inner {
        border: 1 px solid# f00;
        position: relative;
        top: 50 % ;
        transform: translateY(-50 % );
    }
    相关讨论

    你可以做这样的事情

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #container {
       display: table;
       width: <width of your container>;
       height: <height of your container>;
    }

    #inner {
       width: <width of your center div>;
       display: table-cell;
       margin: 0 auto;
       text-align: center;
       vertical-align: middle;
    }

    这也将垂直对齐#inner。如果您不想，请删除display和vertical-align属性;

    您可以使用display: flex作为外部div，并使用水平居中，您必须添加justify-content: center

    1
    2
    3
    4
    #outer{
        display: flex;
        justify-content: center;
    }

    或者您可以访问w3schools - CSS flex Property获取更多想法。

    文字对齐：中心

    应用text-align: center内联内容在行框中居中。但是，由于内部div默认情况下width: 100%，您必须设置特定宽度或使用以下之一：

    • <5233>
    • display: inline
    • display: inline-block

    1
    2
    3
    4
    5
    6
    7
    #inner {
      display: inline-block;
    }

    #outer {
      text-align: center;
    }
    1
      Foo foo

    保证金：0自动

    使用margin: 0 auto是另一种选择，它更适合旧版浏览器的兼容性。它与display: table一起使用。

    1
    2
    3
    4
    #inner {
      display: table;
      margin: 0 auto;
    }
    1
      Foo foo

    Flexbox的

    display: flex的行为类似于块元素，并根据flexbox模型列出其内容。它适用于justify-content: center。

    请注意：Flexbox与大多数浏览器兼容，但不是全部。有关浏览器兼容性的完整和最新列表，请参见此处。

    1
    2
    3
    4
    5
    6
    7
    8
    #inner {
      display: inline-block;
    }

    #outer {
      display: flex;
      justify-content: center;
    }
    1
      Foo foo

    转变

    transform: translate允许您修改CSS可视化格式模型的坐标空间。使用它，元素可以被平移，旋转，缩放和倾斜。要水平居中，需要position: absolute和left: 50%。

    1
    2
    3
    4
    5
    #inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0%);
    }
    1
      Foo foo

    (已弃用)

    标记

    是text-align: center的HTML替代。它适用于较旧的浏览器和大多数新浏览器，但由于此功能已过时且已从Web标准中删除，因此不被视为良好实践。

    1
    2
    3
    #inner {
      display: inline-block;
    }
    1
    2
    3
      <center>
        Foo foo
      </center>

    Flex拥有超过97％的浏览器支持覆盖率，可能是在几行内解决这类问题的最佳方法：

    1
    2
    3
    4
    #outer {
      display: flex;
      justify-content: center;
    }

    好吧，我设法找到一个可能适合所有情况的解决方案，但使用JavaScript：

    这是结构：

    1
    2
    3
      Your content goes here!
      Your content goes here!
      Your content goes here!

    这是JavaScript代码段：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(document).ready(function() {
      $('.container .content').each( function() {
        container = $(this).closest('.container');
        content = $(this);

        containerHeight = container.height();
        contentHeight = content.height();

        margin = (containerHeight - contentHeight) / 2;
        content.css('margin-top', margin);
      })
    });

    如果要在响应式方法中使用它，可以添加以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(window).resize(function() {
      $('.container .content').each( function() {
        container = $(this).closest('.container');
        content = $(this);

        containerHeight = container.height();
        contentHeight = content.height();

        margin = (containerHeight - contentHeight) / 2;
        content.css('margin-top', margin);
      })
    });

    这个方法也可以正常工作：

    1
    2
    3
    4
    5
    div.container {
       display: flex;
       justify-content: center; /* for horizontal alignment */
       align-items: center;     /* for vertical alignment   */
    }

    对于内部，唯一的条件是其height和width不得大于其容器的height和width。

    我找到了一个选项：

    每个人都说使用：

    1
    margin: auto 0;

    但还有另一种选择。为父div设置此属性。它
    随时工作：

    1
    text-align: center;

    看，孩子去中心。

    最后CSS给你：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #outer{
         text-align: center;
         display: block; /* Or inline-block - base on your need */
    }

    #inner
    {
         position: relative;
         margin: 0 auto; /* It is good to be */
    }
    相关讨论

    如果有人想要一个jQuery解决方案中心对齐这些div：

    1
    2
    3
    4
    5
    $(window).bind("load", function() {
        var wwidth = $("#outer").width();
        var width = $('#inner').width();
        $('#inner').attr("style","padding-left:" + wwidth / 2 +"px; margin-left: -" + width / 2 +"px;");
    });

    试试玩吧

    1
    margin: 0 auto;

    如果您也希望将文本居中，请尝试使用：

    1
    text-align: center;
    相关讨论

    你可以像这样简单地使用flexbox：

    1
    2
    3
    4
    #outer {
      display: flex;
      justify-content: center
    }
    1
      Foo foo

    将Autoprefixer应用于所有浏览器支持：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #outer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center
    }

    要不然

    使用变换：

    1
    2
    3
    4
    5
    #inner {
          position: absolute;
          left: 50%;
          transform: translate(-50%)
        }
    1
      Foo foo

    使用Autoprefixer：

    1
    2
    3
    4
    5
    6
    7
    #inner {
      position: absolute;
      left: 50%;
      -webkit-transform: translate(-50%);
          -ms-transform: translate(-50%);
              transform: translate(-50%)
    }
    相关讨论

    截至2019年，因为这个问题仍然得到很多点击，一个非常简单的跨水平中心的跨浏览器答案是将此规则应用于父元素：

    1
    2
    3
    4
    .parentBox {
     display: flex;
     justify-content: center
    }

    CSS 3：

    您可以在父容器上使用以下样式来均匀地水平分布子元素：

    1
    2
    display: flex;
    justify-content: space-between;  // <-- space-between or space-around

    关于justify-content的不同值的一个很好的演示。

    Enter image description here

    CanIUse：浏览器兼容性

    试试吧！：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #containerdiv {
      display: flex;
      justify-content: space-between;
    }

    #containerdiv > div {
      background-color: blue;
      width: 50px;
      color: white;
      text-align: center;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      JS Bin
    </head>
    <body>
     
        88
        77
        55
        33
        40
        45
     
    </body>
    </html>

    我已将内联样式应用于内部div。使用这个。

    1
        Foo foo

    您可以使用CSS Flexbox实现此目的。您只需要将3个属性应用于父元素即可使一切正常运行。

    1
    2
    3
    4
    5
    #outer {
      display: flex;
      align-content: center;
      justify-content: center;
    }

    看看下面的代码，这将使您更好地理解属性。

    了解有关CSS Flexbox的更多信息

    1
    2
    3
    4
    5
    6
    7
    8
    #outer {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
      width: 100%;
      height: 200px;
     }
    1
      Foo foo

    我最近发现的好处是，混合使用line-height + vertical-align和50%左侧技巧，你可以使用纯CSS在水平和垂直两个动态大小的盒子里面center一个动态大小的盒子。

    请注意，您必须使用跨度(和inline-block)，在现代浏览器和IE8中进行测试。
    HTML：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      Center dynamic box using only css test
       
           
               
                    <span class="dyn-box">
                        This is a head
                       
                            This is a body<br />
                            Content<br />
                            Content<br />
                            Content<br />
                            Content<br />
                       
                    </span>

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    .container
    {
        position:absolute;
        left:0;right:0;top:0;bottom:0;
        overflow:hidden;
    }
    .center
    {
        position:absolute;
        left:50%; top:50%;
    }
    .center-container
    {
        position:absolute;
        left:-2500px;top:-2500px;
        width:5000px;height:5000px;
        line-height:5000px;
        text-align:center;
        overflow: hidden;
    }
    .dyn-box
    {
        display: inline-block;
        vertical-align: middle;
        line-height: 100%;

        /* Purely asthetic below this point */
        background: #808080;
        padding: 13px;
        border-radius: 11px;
        font-family: arial;
    }
    .dyn-head
    {
        background:red;
        color:white;
        min-width: 300px;
        padding: 20px;
        font-size: 23px;
    }
    .dyn-body
    {
        padding: 10px;
        background:white;
        color:red;
    }

    见这里的例子。

    1
    2
    3
    4
    #inner {
        width: 50%;
        margin: 0 auto;
    }
    相关讨论

    #inner div下面的CSS怎么样：

    1
    2
    3
    4
    #inner {
      width: 50%;
      margin-left: 25%;
    }

    我大多使用这个CSS来居中div。

    相关讨论

    简单一点！

    1
    2
    3
    4
    #outer {
      display: flex;
      justify-content: center;
    }
    1
      Foo foo

    我只使用最简单的解决方案，但它适用于所有浏览器：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            center a div within a div?
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }

                #outer{
                    width: 80%;
                    height: 500px;
                    background-color: #003;
                    margin: 0 auto;
                }

                #outer p{
                    color: #FFF;
                    text-align: center;
                }

                #inner{
                    background-color: #901;
                    width: 50%;
                    height: 100px;
                    margin: 0 auto;

                }

                #inner p{
                    color: #FFF;
                    text-align: center;
                }
            </style>
        </head>

        <body>
            <p>
    this is the outer div
    </p>
               
                    <p>
    this is the inner div
    </p>
               
           
        </body>
    </html>

    它也可以使用绝对定位水平和垂直居中，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #outer{
        position: relative;
    }

    #inner{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    使用：

    1
     

    样式：

    1
    2
    3
    4
    #parent {
       display: flex;
       justify-content: center;
    }

    如果你想水平居中，你应该写如下：

    1
    2
    3
    4
    5
    #parent {
       display: flex;
       justify-content: center;
       align-items: center;
    }

    可以使用CSS 3 flexbox。使用弹性框时有两种方法。

  • 设置父display:flex;并将属性{justify-content:center; ,align-items:center;}添加到父元素。

    • 1
    2
    3
    4
    5
    #outer{
      display: flex;
      justify-content: center;
      align-items: center;
      }
    1
      Foo foo

  • 设置父display:flex并将margin:auto;添加到子项。

    • 1
    2
    3
    4
    5
    6
    #outer{
      display: flex;
    }
    #inner{
      margin: auto;
    }
    1
      Foo foo

    您可以使用flexbox。

    1
    2
    3
    4
    #inner {
       display: flex;
       justify-content: center;
    }

    您可以在以下链接中了解有关它的更多信息：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/

    相关讨论

    将div放在div中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .outer {
      display: -webkit-flex;
      display: flex;

      //-webkit-justify-content: center;                           
      //justify-content: center;
     
      //align-items: center;

      width: 100%;
      height: 100px;
      background-color: lightgrey;
    }

    .inner {
      background-color: cornflowerblue;
      padding: 2rem;
      margin: auto;  
     
      //align-self: center;                    
    }
    1
      Foo foo

    相关讨论

    这是使用flexbox水平居中的另一种方法，而不指定内部容器的任何宽度。我们的想法是使用伪元素来推动内部内容从右侧和左侧。

    在伪元素上使用flex:1将使它们填充剩余的空间并采用相同的大小，内部容器将居中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .container {
      display: flex;
      border: 1px solid;
    }

    .container:before,
    .container:after {
      content:"";
      flex: 1;
    }

    .inner {
      border: 1px solid red;
      padding: 5px;
    }
    1
        Foo content

    我们还可以通过简单地将flex的方向更改为列来考虑垂直对齐的相同情况：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .container {
      display: flex;
      flex-direction: column;
      border: 1px solid;
      min-height: 200px;
    }

    .container:before,
    .container:after {
      content:"";
      flex: 1;
    }

    .inner {
      border: 1px solid red;
      padding: 5px;
    }
    1
        Foo content

    我想回答这个，因为我注意到没人提到计算方法。用法是你所居中的div，如果你知道它的宽度，让我们说它是1200像素，请选择：

    1
    2
    3
    4
    .container {
        width:1200px;
        margin-left: calc(50% - 600px);
    }

    所以基本上它会增加50％的左边距减去已知宽度的一半。

    广泛使用并在包括旧浏览器在内的许多浏览器中使用的最着名的方法是使用margin，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #parent {
      width: 100%;
      background-color: #cccccc;
    }

    #child {
      width: 30%; /*we need the width*/
      margin: 0 auto; /*this does the magic*/
      color: #ffffff;
      background-color: #000000;
      padding: 10px;
      text-align: center;
    }
    1
      I'm the child and I'm horizontally centered! My daddy is a greyish div dude!

    运行代码以查看它是如何工作的，当你尝试以这种方式居中时，你在CSS中还有两个重要的事情：margin: 0 auto;使它成为想要的div中心，另外不要忘记孩子的，否则它不会像预期的那样集中！

    我在各种项目中使用的最好的是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .outer{
      width: 500px;
      height: 500px;
      position: relative;
      background: yellow;
    }
    .inner{
      width: 100px;
      height: 100px;
      background:red;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    小提琴链接

    这肯定会使你的#inner水平和垂直居中。这在所有浏览器中也兼容。我只是添加了额外的样式，以显示它是如何居中的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #outer {
      background: black;
      position: relative;
      width:150px;
      height:150px;
    }

    #inner {
      background:white;
      position: absolute;
      left:50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
    }
    1
      Foo foo

    但是当然如果你只想让它水平对齐，这可能对你有帮助。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #outer {
      background: black;
      position: relative;
      width:150px;
      height:150px;
    }

    #inner {
      background:white;
      position: absolute;
      left:50%;
      transform: translate(-50%,0);
      -webkit-transform: translate(-50%,0);
      -moz-transform: translate(-50%,0);
      -o-transform: translate(-50%,0);
    }
    1
      Foo foo

    你可以使用flex-box购买女巫这些天是一个很好的技术。
    对于使用flex-box，您应该将display: flex;和align-items: center;提供给您的父元素或#outer div元素。代码应该是这样的：

    1
    2
    3
    4
    #outer {
      display: flex;
      align-items: center;
    }
    1
      Foo foo

    这应该使您的孩子或#inner div水平居中。但你实际上看不到任何变化。因为我们的#outer div没有高度，换句话说，它的高度设置为auto，所以它与所有子元素的高度相同。所以经过一些视觉样式后，结果代码应该是这样的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #outer {
      height: 500px;
      display: flex;
      align-items: center;
      background-color: blue;
    }

    #inner {
      height: 100px;
      background: yellow;
    }
    1
      Foo foo

    您可以看到#inner div现在居中。 Flex-box是使用CSS在水平或垂直堆栈中定位元素的新方法，它具有96％的全局浏览器兼容性。因此，您可以自由使用它，如果您想了解有关Flex-box的更多信息，请访问CSS-Tricks文章，这是我认为使用Flex-box的最佳学习场所。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .outer
    {
      background-color: rgb(230,230,255);
      width 100%;
      height: 50px;
    }
    .inner
    {
      background-color: rgb(200,200,255);
      width: 50%;
      height: 50px;
      margin: 0 auto;
    }
    1
        margin 0 auto

    对不起，但这个1990年代的宝宝刚刚为我工作：

    1
      <center>Foo foo</center>

    我为这罪而下地狱吗？

    相关讨论

    使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
      #outer{
        text-align: center;
        width: 100%;
      }
      #inner{
        text-align: center;
      }
    </style>

    使用此代码：

    1
    2
    3
    4
    5
    6
    7
    8
        Foo foo


    #inner {
      width: 50%;
      margin: 0 auto;
      text-align: center;
    }

    最简单的方法之一是使用display: flex。外部div只需要显示flex，内部需要margin: 0 auto使其水平居中。

    要垂直居中并将div放在另一个div中，请查看下面.inner类的注释

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .wrapper {
      display: flex;
      /* Adding whatever height & width we want */
      height: 300px;
      width: 300px;
      /* Just so you can see it is centered */
      background: peachpuff;
    }

    .inner {
      /* center horizontally */
      margin: 0 auto;
      /* center vertically */
      /* margin: auto 0; */
      /* center */
      /* margin: 0 auto; */
    }
    1
        I am horizontally!

    我们可以使用下一个CSS类，它允许垂直和水平中心任何元素与其父元素：

    1
    2
    3
    4
    5
    6
    .centerElement{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    您可以添加以下代码：

    1
    2
    3
    4
    5
    #inner {
      width: 90%;
      margin: 0 auto;
      text-align:center;
    }
    1
      Foo foo

    这会水平和垂直地集中你的内部div：

    1
    2
    3
    4
    5
    6
    #outer{
        display: flex;
    }
    #inner{
        margin: auto;
    }

    仅用于水平对齐，更改

    1
    margin: 0 auto;

    对于垂直，改变

    1
    margin: auto 0;

    您可以使用一行代码，只需text-align:center。

    这是一个例子：

    1
    2
    3
    #inner {
      text-align:center;
      }
    1
      <button>hello</button>

    使用以下代码。

    HTML

    1
      Foo foo

    CSS

    1
    2
    3
    4
    5
    6
    #outer {
      text-align: center;
    }
    #inner{
      display: inline-block;
    }

    将一些width提供给内部div并在CSS属性中添加margin:0 auto;。

    在阅读完所有答案后，我没有看到我喜欢的答案。这是您可以将元素置于另一个元素中心的方法。

    jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <p>
    Horz Center
    </p>

       

    <p>
    Vert Center
    </p>

       

    <p>
    True Center
    </p>

       

    .vertCenter
    {
        position: absolute;
        top:50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .horzCenter
    {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .trueCenter
    {
        position: absolute;
        left: 50%;
        top: 50%;
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .outterDiv
    {
        position: relative;
        background-color: blue;
        width: 10rem;
        height: 10rem;
        margin: 2rem;
    }
    .innerDiv
    {
        background-color: red;
        width: 5rem;
        height: 5rem;
    }

    1
      Foo foo

    这很简单。

    只需确定要为内部div提供的宽度，并使用以下CSS。

    CSS

    1
    2
    3
    4
    .inner{
      width: 500px; // Assumed width
      margin: 0 auto;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    #outer {postion: relative}
    #inner {
        width: 100px;
        height: 40px;
        position: absolute;
        top: 50%;
        margin-top:-20px; /* Half of your Height */
    }

    CSS

    1
    2
    3
    4
    #inner {
      display: table;
      margin: 0 auto;
    }

    HTML

    1
      Foo foo

    是的，这是水平对齐的简短代码。我希望你喜欢这段代码。

    1
    2
    3
    4
    5
    .classname {
       display: box;
       margin: 0 auto;
       width: 500px /* Width set as per your requirement. */;
    }

    Easiest answer add margin:auto; to inner .

    1
        Foo foo

    css代码

    1
    2
    .outer{ width:100%; height:300px; background:yellow;}
    .inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

    检查我的codepen链接
    http://codepen.io/feizel/pen/QdJJrK

    enter image description here

    根据您的具体情况，最简单的解决方案可能是：

    1
    margin:0 auto; float:none;
    1
    2
    3
    4
    5
    div{
       width:100px;
       height:100px;
       margin:0 auto;
      }

    对于正常的事情，如果你使用div静态方式

    如果你希望div在中心时div是绝对的，那么这里是例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .parentdiv{
       position:relative;
       height:500px;
    }

    .child_div{
       position:absolute;
       height:200px;
       width:500px;
       left:0;
       right:0;
       margin:0 auto;
    }

    1
    2
    3
    4
    #inner {
      display: table;
      margin: 0 auto;
    }
    1
      Foo foo

    相关讨论

    这对我有用：

    1
    2
    3
    4
    5
    6
    7
       #inner {
        position: absolute;
        margin: 0 auto;
        left: 0;
        width: 7%;
        right: 0;
    }

    在此代码中，您将确定元素的宽度。

    我发现与margin-left相似，但也可以是left。

    1
    2
    3
    4
    5
    #inner{
        width: 100%;
        max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
        left: 65px; /*this has to be approximately the same as the max-width*/
    }

    只需Margin:0px auto：

    1
    2
    3
    4
    5
    #inner{
      display: block;
      margin: 0px auto;
      width: 100px;
    }
    1
      Foo foo

    试试这个：

    1
     

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #a{
       border: 1px solid red;
       height: 120px;
       width: 400px
    }

    #b{
       border: 1px solid blue;
       height: 90px;
       width: 300px;
       position: relative;
       margin-left: auto;
       margin-right: auto;
    }

    根据要求，使div居中的主要属性是margin: auto和width:：

    1
    2
    3
    4
    5
    6
    .DivCenter{
        width: 50%;
        margin: auto;
        border: 3px solid #000;
        padding: 10px;
    }
    相关讨论

    1
    2
    3
    4
    #inner {
      width: 50%;
      margin: 0 auto;
    }
    相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #outer {
      width: 160px;
      padding: 5px;
      border-style: solid;
      border-width: thin;
      display: block;
    }

    #inner {
      margin: auto;
      background-color: lightblue;
      border-style: solid;
      border-width: thin;
      width: 80px;
      padding: 10px;
      text-align: center;
    }
    1
      Foo foo

    最好的方法是使用表格单元格显示(内部)，它紧跟在带有显示表格(外部)的div之后，并设置内部div的垂直对齐(带有表格单元格显示)和放置在内部div中的每个标记在div或page的中心。

    注意：您必须将指定高度设置为外部

    这是你知道没有位置相对或绝对的最佳方式，你可以在每个浏览器中使用它。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #outer{
      display: table;
      height: 100vh;
      width: 100%;
    }


    #inner{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    1
    2
    3
    4
              set content center
         
         
            hi this is the best way to align your items center

    HTML：

    1
     

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #outer{
      width: 500px;
      background-color: #000;
      height: 500px
    }
    #inner{
      background-color: #333;
      margin: 0 auto;
      width: 50%;
      height: 250px;
    }

    小提琴。

    试试这个：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #outer{
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    #outer > #inner{
        display: inline-block;
        font-size: 19px;
        margin: 20px;
        max-width: 320px;
        min-height: 20px;
        min-width: 30px;
        padding: 14px;
        vertical-align: middle;
    }

    我知道我回答这个问题有点迟了，我没有费心去阅读每一个答案，所以这可能是重复的。这是我的看法：

    1
    inner { width: 50%; background-color: Khaki; margin: 0 auto; }
    相关讨论

    将text-align:center;添加到父div

    1
    2
    3
    #outer {
        text-align: center;
    }

    https://jsfiddle.net/7qwxx9rs/

    要么

    1
    2
    3
    4
    #outer > div {
        margin: auto;
        width: 100px;
    }

    https://jsfiddle.net/f8su1fLz/

    你可以用不同的方式做到这一点。请参阅以下示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    1. First Method
    #outer {
       text-align: center;
       width: 100%;
    }
    #inner {
       display: inline-block;
    }


    2. Second method
    #outer {
      position: relative;
      overflow: hidden;
    }
    .centered {
       position: absolute;
       left: 50%;
    }

    最简单的方法之一......

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
     <head>
        <style>
            #outer-div {
            width: 100%;
            text-align: center;
            background-color: #000
            }
            #inner-div {
            display: inline-block;
            margin: 0 auto;
            padding: 3px;
            background-color: #888
            }
        </style>
     </head>
     <body>
       
             I am a easy horizontally centered div.
       
     </body>
    </html>

    首先：你需要给第二个div增加一个宽度：

    例如：

    HTML

    1
        </div

    CSS：

    1
    2
    3
    4
     #inner{
         width: 50%;
         margin: auto;
    }

    请注意，如果您没有给它一个宽度，它将占用该行的整个宽度。

    这个简单的解决方案对我有用，而不是多个包装器和/或自动边距：

    1
    2
    3
    4
    5
    6
    <div style="top:50%; left:50%;
        height:100px; width:100px;
        margin-top:-50px; margin-left:-50px;
        background:url('lib/loading.gif') no-repeat center #fff;
        text-align:center;
        position:fixed; z-index:9002;"    >Loading...

    它将div放在视图的中心(垂直和水平)，大小和大小调整，居中背景图像(垂直和水平)，居中文本(水平)，并在视图中和内容顶部保留div。只需放入HTML body即可享受。

    您可以添加另一个具有相同大小的#inner的div，并将其向左移动-50％(#inner的宽度的一半)和#inner的50％。
    对不起我的英语不好

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #inner {
      position: absolute;
      left: 50%;
    }

    #inner > div {
      position: relative;
        left: -50%;
      }
    1
      Foo foo

    相关讨论

    我们可以使用FLEXBOX轻松实现这一目标：

    1
          Foo foo

    将div放在div内部HORIZONTALLY：

    1
    2
    3
    4
    #outer {
     display: flex;
     justify-content: center;
    }

    enter image description here

    将一个div放在div内垂直：

    1
    2
    3
    4
    #outer {
      display: flex;
      align-items: center;
        }

    enter image description here

    并且，要完全中间div垂直和水平：

    1
    2
    3
    4
    5
    #outer{
    display: flex;
      justify-content: center;
      align-items: center;
    }

    enter image description here

    希望对你有些人有所帮助。
    快乐的编码！

    将CSS添加到内部div中。设置margin: 0 auto并将其宽度设置为小于100％，这是外部div的宽度。

    1
        Foo foo

    这将给出期望的结果。

    相关讨论

    对于水平中心DIV

    1
    2
    3
    4
    5
    6
    7
    #outer{
     width:100%;
     text-align:center;
    }
    #inner{
     display:inline-block;
    }
    1
      Foo foo

    你可以使用链接https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

    1
    2
    3
    4
    5
    6
    7
    8
    .outer{
          display: table;
          width: 100%;
          height: 100%;
    }
    .inner {
        vertical-align: middle;
    }

    请参阅https://v4-alpha.getbootstrap.com/examples/cover/

    相关讨论

    我正在为那些想要水平和垂直对齐内容的设计师分享这个答案。或者你可以说在网页的中心。
    请到这个网站下载文件。

    CSS代码

    1
    2
    3
    4
    5
    .ver-hor-div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html>
      <head>
        Center
        <style>
        .outer{
              text-align: center;
               }
        .inner{
              width: 500px;
              margin: 0 auto;
              background: brown;
              color: red;
        }
     
    </style>

      </head>

      <body>

       
          This DIV is centered
       

      </body>
    </html>

    PLZ尝试这将没有HTML中心标签

    1
      Foo foo
    1
    2
    3
    4
    .outer {
        text-align: center;
        width: 100%
    }
    相关讨论

    1
    <center>

    我被宠坏了最简单的中心知道吗？

    1
    </center>
    相关讨论

    居中：自动宽度边距

    通过将其右边距和左边距宽度设置为"自动"，此框水平居中。这是使用CSS实现水平居中的首选方法，并且在大多数具有CSS＆nbsp; 2支持的浏览器中都能很好地工作。不幸的是，Internet＆nbsp; Explorer＆nbsp; 5 / Windows没有响应这种方法 - 这是浏览器的缺点，而不是技术。

    有一个简单的解决方法。 (当你反击那个词诱发的恶心时，暂停一下。)准备好了吗？ Internet＆nbsp; Explorer＆nbsp; 5 / Windows错误地将CSS"text-align"属性应用于块级元素。声明包含块级元素(通常是BODY元素)的"text-align：center"会在Internet＆nbsp; Explorer＆nbsp; 5 / Windows中水平居中。

    这种解决方法有一个副作用：CSS"text-align"属性是继承的，以内联内容为中心。通常需要为居中的框明确设置"text-align"属性，以抵消互联网＆nbsp; Explorer＆nbsp; 5 / Windows变通方法??的影响。相关的CSS如下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    body {
        margin: 50px 0px;
        padding: 0px;
        text-align: center;
    }

    #Content {
        width: 500px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        border: 1px dashed #333;
        background-color: #EEE;
    }

    http://bluerobot.com/web/css/center1.html

    相关讨论