如何水平居中 ?

Question

如何使用CSS将<div>水平居中于另一个<div>？

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Answer 1

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

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将width设置为50%。任何宽度小于包含<div>将工作。 margin: 0 auto是实际的中心。

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

#inner {
  display: table;
  margin: 0 auto;
}

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

这里的工作示例：

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 2

CSS3's box-align property

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

Answer 3

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

Answer 4

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

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

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <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>
</div>

Answer 5

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

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

外部div不需要任何额外的属性来实现。

Answer 6

对于Firefox和Chrome：

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

对于Internet Explorer，Firefox和Chrome：

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

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

Answer 7

这是我的答案。

#outerDiv {
  width: 500px;
}

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

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 8

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

这是一个显示水平和垂直对齐的Fiddle。

有关Mozilla Developer Network的更多信息。

Answer 9

克里斯·科伊尔（Chris Coyier）在博客上写了一篇关于“未知中心”的excellent post。这是多种解决方案的综合。我发布了一个未在此问题中发布的内容。它有更多的浏览器支持然后flexbox解决方案，你没有使用display: table;可能打破其他东西。

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

Answer 10

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

#outer {
    position: absolute;
    left: 50%;
}

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

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

Answer 11

例如，请参阅this link和下面的代码段：

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

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

如果父母下面有很多孩子，那么你的CSS内容必须像这样的example on fiddle。

HTML内容看起来像这样：

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

然后看看这个example on fiddle。

Answer 12

如果您不想在内部div上设置固定宽度，您可以执行以下操作：

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

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

Answer 13

Centering only horizontally

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

容器：

应该有text-align: center;

内容框：

应该有display: inline-block;

演示：

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

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

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

另见this Fiddle！

Centering both horizontally & vertically

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

外容器：

应该有display: table;

内部容器：

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

内容框：

应该有display: inline-block;

演示：

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

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

另见this Fiddle！

Answer 14

最简单的方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 15

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

.outer - 全宽
.inner - 没有宽度设置（但可以指定最大宽度）

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

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

演示：

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

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

Answer 16

你可以做这样的事情

#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属性;

Answer 17

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

JSFIDDLE

#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 % );
}

Answer 18

Text-align: center

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

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margin: 0 auto

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

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flex表现得像一个块元素，并根据flexbox模型列出其内容。它适用于justify-content: center。

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

#inner {
  display: inline-block;
}

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Transform

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

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

`<center>` (Deprecated)

标签<center>是text-align: center的HTML替代品。它适用于较旧的浏览器和大多数新浏览器，但它不被认为是一个好的做法，因为这个功能是obsolete并已从Web标准中删除。

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Answer 19

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

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

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

Answer 20

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

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

对于内部<div>，唯一的条件是它的height和width不得大于其容器的#outer { display: flex; justify-content: center; }和<div class="container"> <div class="content">Your content goes here!</div> <div class="content">Your content goes here!</div> <div class="content">Your content goes here!</div> </div>。

Answer 21

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

$(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);
  })
});

Answer 22

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

这是结构：

$(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);
  })
});

这是JavaScript代码段：

margin: auto 0;

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

text-align: center;

Answer 23

最好的方法是使用CSS 3。

Box model:

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

柔性：

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

以未知高度和宽度为中心

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

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

<div class="content">This works with any content</div>

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

Answer 30

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

如何水平居中 ?

问题描述投票：3992回答：98

98个回答

Centering only horizontally

容器：

内容框：

演示：

Centering both horizontally & vertically

外容器：

内部容器：

内容框：

演示：

Text-align: center

Margin: 0 auto

Flexbox

Transform

`<center>` (Deprecated)

Box model:

Read more about centering the child elements

以未知高度和宽度为中心

最新问题

如何水平居中 ?

问题描述 投票：3992回答：98

98个回答

Centering only horizontally

容器：

内容框：

演示：

Centering both horizontally & vertically

外容器：

内部容器：

内容框：

演示：

Text-align: center

Margin: 0 auto

Flexbox

Transform

<center> (Deprecated)

Box model:

Read more about centering the child elements

以未知高度和宽度为中心

最新问题

问题描述投票：3992回答：98

`<center>` (Deprecated)