如何水平中心 <div>?

Question

我怎么能水平中心 <div> 在另一个 <div> 使用CSS?

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

Answer 1

您可以将此CSS应用于内部＆lt; div＆gt; ：

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

当然，您不必将 width 设置为 50％。任何宽度小于包含＆lt; div＆gt; 的宽度都可以。 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

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

最好的办法是 CSS3.

盒模型：

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

Flex:

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

阅读更关心孩子的元素

• 2链接

• 链接3

• 链路4

和 这就解释了为什么盒子的模型是最好的办法:

• 为什么是W3C框模型被认为是更好吗？

Answer 4

假设你的div是 200px wide：

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

确保父元素为定位即亲属，固定的，绝对的或粘性的。

如果您不知道div的宽度，可以使用 transform：translateX（-50％）; 而不是负边距。

https://jsfiddle.net/gjvfxxdj/

Answer 5

我已创建此示例，以展示如何垂直和水平 对齐。

代码基本上是这样的：

#outer {
  position: relative;
}

和...

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

即使您重新调整屏幕，它也将保留在 center 中。

Answer 6

有些海报使用 display：box 提到了CSS＆nbsp; 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>

如果您需要支持使用较旧语法的旧版浏览器此处，请查看

Answer 7

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

您可以使用：

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

Answer 8

以未知高度和宽度为中心

水平和垂直。它适用于相当现代的浏览器（Firefox，Safari / WebKit，Chrome，Internet＆nbsp; Explorer＆nbsp; 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 9

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

Answer 10

CSS3的盒子对齐属性

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

Answer 11

设置 width 并将 margin-left 和 margin-right 设置为 auto 。不过，这只是水平的。如果你想要两种方式，你只需要两种方式。不要害怕尝试;这不像你会破坏任何东西。

Answer 12

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

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

$(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 13

我通常采用的方式是使用绝对位置：

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

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

Answer 14

对于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浏览器Quirks模式下对于旧版浏览器支持是必需的。

Answer 15

这是我的答案。

#outerDiv {
  width: 500px;
}

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

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

Answer 16

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

这是 小提琴 ，显示水平和垂直对齐方式。

更多信息请访问 Mozilla开发者网络

Answer 17

克里斯·科伊尔（Chris Coyier）撰写了一篇关于“未知中心”的优秀文章 '在他的博客上。这是多种解决方案的综合。我发布了一个未在此问题中发布的内容。它有更多的浏览器支持，然后是flexbox-solution，你没有使用 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 18

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

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

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

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

Answer 19

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

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内容必须像小提琴上的例子

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>

然后看看这个关于小提琴的例子。

Answer 20

中心只有水平

以我的经验，最好的办法中心的一个盒子的水平是适用以下性能：

该容器：

• 应该有 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>

也参看 这小提琴!

---

中心在水平和垂直

以我的经验，最好的办法中心的一个盒子 既 垂直和水平是使用一个另外的容器时，适用下列特性：

外容器：

• 应该有 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>

也参看 这小提琴!

Answer 21

最简单的方法：

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

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

Answer 22

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

• .outer -全宽度
• .inner -没有宽设定的(但最大宽度可以被指定)

假设计算的宽度的要素是1000px和300像素的分别。继续进行如下：

1. 包裹 .inner 内部 .center-helper
2. 让 .center-helper 一个内联块；它变得同样大小 .inner 赚这300像素宽。
3. 推 .center-helper 50%的权利相对于其父母;这将其留在500像素占据一席之地.外。
4. 推 .inner 50%左相对于其父母;这将其留在-个150像素占据一席之地.中心帮助这意味着其离开是在500-150=350px占据一席之地.外。
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>

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

Answer 23

你可以做这样的事情

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

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

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 25

文字调整:中心

申请 text-align: center 内联内容都集中在线框。但是由于内部已经通过默认 width: 100% 你得设置一个特定的宽度或使用下列之一：

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

---

保证金：0汽车

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

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

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

---

弹性盒

display: flex 就像一块元素和规定了其内容根据弹性盒模型。它的工作原理 justify-content: center.

请注意： 弹性盒是与大多数的浏览器，但不是所有的。看看 在这里， 对于一个完整和最新的清单浏览器的兼容性。

#inner {
  display: inline-block;
}

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

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

---

变换

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> 是HTML替代 text-align: center.它的工作对旧的浏览器和最新的，但它不是一个好的做法，由于此功能 过时 和已被删除，从该网页的标准。

#inner {
  display: inline-block;
}

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

Answer 26

你可以使用 display：flex 作为你的外部div，并且要横向居中你必须添加 justify-content：center

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

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

Answer 27

此方法也可以正常使用：

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

对于内部＆lt; div＆gt; ，唯一的条件是它的 height 和 width 不得大于它的 height 和 width 容器

Answer 28

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

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

Answer 29

好吧，我设法找到了一个可能适合所有情况的解决方案，但是使用了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代码段：

$(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 30

我找到了一个选项：

每个人都说要使用：

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