如何水平居中元素

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 是实际居中的位置。

如果您的目标是 Internet Explorer 8（及更高版本），最好使用这个：

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

---

编辑

使用flexbox 可以很容易地设置 div 水平和垂直居中的样式。

#inner {  
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

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

要将 div 垂直居中对齐，请使用属性align-items: center。

Answer 2

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

Answer 3

设置width 并将margin-left 和margin-right 设置为auto。不过，这仅适用于横向。如果你想要两种方式，你就两种方式都做。不要害怕尝试；你不会破坏任何东西。

Answer 4

如果您不想在内部 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 5

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

注意：我正在分享这段代码，因为谷歌把我带到了这个 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 6

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

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

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

使用CSS calc()，代码可以变得更简单：

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原理还是一样的；将项目放在中间并补偿宽度。

Answer 7

CSS 3's box-align property

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

Answer 8

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

你可以使用：

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

Answer 9

对于 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 Mode 中它是必需的以支持旧版浏览器。

Answer 10

最好的方法是使用CSS 3。

盒子模型：

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

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

• Link 2

• Link 3

• Link 4

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

• Why is the W3C box model considered better?

Answer 11

居中：自动宽度边距

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

有一个简单的解决方法。 （在你抵抗那个词引起的恶心时停顿了一下。）准备好了吗？ Internet Explorer 5/Windows 错误地将 CSS“文本对齐”属性应用于块级元素。为包含的块级元素（通常是 BODY 元素）声明“text-align:center”，使 Internet Explorer 5/Windows 中的框水平居中。

这种解决方法有一个副作用：继承了 CSS“text-align”属性，将内联内容居中。通常需要为居中的框显式设置“文本对齐”属性，以抵消 Internet Explorer 5/Windows 解决方法的影响。相关的 CSS 如下。

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

Answer 12

我通常的做法是使用绝对位置：

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

外部 div 不需要任何额外的属性即可工作。

Answer 13

一些发帖人提到了使用 display:box 居中的 CSS 3 方式。

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

因此，为了完整起见，这里是使用 Flexible Box Layout Module 在 CSS 3 中居中的最新方法。

因此，如果您有简单的标记，例如：

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...并且您想将您的项目置于框内，这就是您需要的父元素 (.box)：

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

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

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

如果您需要支持使用旧语法的旧浏览器，那么 flexbox here's 是个好地方。

Answer 14

我最近找到了一种方法：

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

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

两个元素必须具有相同的宽度才能正常工作。

Answer 15

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

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>

Answer 16

用途：

#outerDiv {
  width: 500px;
}

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

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

Answer 17

我创建了this example 来展示如何垂直和水平 align。

代码基本上是这样的：

#outer {
 position: relative;
}

还有……

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

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

Answer 18

对#inner div 使用以下 CSS 内容：

#inner {
  width: 50%;
  margin-left: 25%;
}

我主要使用这个 CSS 内容来居中 divs。

Answer 19

你可以这样做

#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 20

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 21

我最近发现的一件好事，混合使用line-height+vertical-align 和50% 左技巧，您可以在水平和垂直方向上将center 一个动态大小的框放入另一个动态大小的框内使用纯 CSS。

请注意，您必须使用跨度（和 inline-block），在现代浏览器 + Internet Explorer 8 中进行了测试。 HTML：

<h1>Center dynamic box using only css test</h1>
<div class="container">
  <div class="center">
    <div class="center-container">
      <span class="dyn-box">
        <div class="dyn-head">This is a head</div>
        <div class="dyn-body">
          This is a body<br />
          Content<br />
          Content<br />
          Content<br />
          Content<br />
        </div>
      </span>
    </div>
  </div>
</div>

CSS：

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

See example here.

Answer 22

试着玩弄

margin: 0 auto;

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

text-align: center;

Answer 23

我发现了一个选项：

每个人都说要使用：

margin: auto 0;

但还有另一种选择。为父 div 设置此属性。它 随时随地完美运行：

text-align: center;

看，孩子去中心。

最后是为你准备的 CSS：

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

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

Answer 24

<center>

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

</center>

Answer 25

例如，请参阅this link 和下面的 sn-p：

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 26

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

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

假设元素的计算宽度分别为 1000 像素和 300 像素。进行如下操作：

1. 将.inner 包裹在.center-helper 内
2. 使.center-helper 成为内联块；它的大小与.inner 相同，宽度为 300 像素。
3. 将.center-helper 相对于其父项向右推50%；这将其左侧放置在 500 像素处。外层。
4. 将.inner 相对于其父级向左推50%；这将其左侧放置在 -150 像素处。中心助手，这意味着它的左边是 500 - 150 = 350 像素 wrt。外层。
5. 将.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>

Answer 27

这是您想要的最短路径。

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 28

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

结构如下：

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

这里是 JavaScript sn-p：

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

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

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

Answer 29

我知道我回答这个问题有点晚了，而且我没有费心阅读每一个答案，所以这个可能是重复的。 Here's my take:

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

Answer 30

将未知高度和宽度的 div 居中

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

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

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

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