如何在另一个中水平中心a ?[英]How to horizontally center a in another ? 本文翻译自  community wiki  查看原文  2018-05-01  3449790    css/

How can I horizontally center a <div> within another <div> using CSS (if it's even possible)?

如何使用CSS在另一个

中水平居中(如果可能的话)?

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

84 个解决方案

#1

You can apply this CSS to the inner <div>:

您可以将此CSS应用于内部

:

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

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

当然，你不需要把宽度设为50%。任何小于包含

的宽度都可以。边际:0自动是什么做实际的定心。

If you are targeting IE8+, it might be better to have this instead:

如果你的目标是IE8+，那么最好选择以下方法:

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

It will make the inner element center horizontally and it works without setting a specific width.

它将使内部元素的中心水平，它工作没有设置特定的宽度。

Working example here:

工作的例子:

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

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

#2

If you don't want to set a fixed width on the inner div you could do something like this:

如果你不想在内部div设置一个固定的宽度，你可以这样做:

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

#inner {
  display: inline-block;
}

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

That makes the inner div into an inline element that can be centered with text-align.

这使得内部div成为一个可以以文本对齐为中心的内联元素。

#3

The best approaches are with CSS 3.

最好的方法是使用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%;
}

According to your usability you may also use the box-orient, box-flex, box-direction properties.

根据您的可用性，您还可以使用盒指向、盒弯曲、盒指向属性。

Flex:

Flex:

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

Read more about centering the child elements

• Link 2

  链接2

• Link 3

  链接3

• Link 4

  链接4

And this explains why the box model is the best approach:

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

• Why is the W3C box model considered better?
• 为什么W3C box模型被认为更好?

#4

Suppose that your div is 200px wide:

假设您的div宽度为200px:

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

Make sure the parent element is positioned i.e. relative, fixed, absolute, or sticky.

确保父元素的位置是相对的、固定的、绝对的或粘性的。

If you don't know the width of your div, you can use transform:translateX(-50%); instead of the negative margin.

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

https://jsfiddle.net/gjvfxxdj/

https://jsfiddle.net/gjvfxxdj/

#5

I've created this example to show how to vertically and horizontally align.

我创建这个示例是为了展示如何垂直和水平对齐。

Code is basically this:

代码基本上是这样的:

#outer {
  position: relative;
}

and...

和…

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

and it will stay in the center even when you re-size your screen.

即使你重新调整你的屏幕尺寸，它也会保持在中间。

#6

Some posters have mentioned the CSS 3 way to center using display:box.

一些海报提到了使用display:box来居中的CSS 3方法。

This syntax is outdated and shouldn't be used anymore. [See also this post].

这种语法已经过时了，不应该再使用了。(参见这篇文章)。

So just for completeness here is the latest way to center in CSS 3 using the Flexible Box Layout Module.

为了完整起见，这里有一种最新的方法，可以使用灵活的Box布局模块将CSS 3居中。

So if you have simple markup like:

如果你有简单的标记，比如:

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

...and you want to center your items within the box, here's what you need on the parent element (.box):

…如果你想把你的项目放在方框里，这是你在父元素(.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>

If you need to support older browsers which use older syntax for flexbox here's a good place to look.

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

#7

If you don't want to set a fixed width and don't want the extra margin, add display: inline-block to your element.

如果您不想设置一个固定的宽度，也不想要额外的空白，那么在元素中添加display: inline-block。

You can use:

您可以使用:

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

#8

CSS3's box-align property

CSS3 box-align房地产

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

#9

It cannot be centered if you don't give it a width, otherwise it will take, by default the whole horizontal space.

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

#10

Centering a div of unknown height and width

Horizontally and vertically. It works with reasonably modern browsers (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera, etc.)

水平和垂直。它与现代浏览器兼容(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>

Tinker with it further on Codepen or on JSBin.

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

#11

Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways. Don't be afraid to experiment; it's not like you'll break anything.

设置宽度并将空白-左和空白-右设置为自动。不过这是水平的。如果你想要两种方法，你只需要两种方法。不要害怕尝试;你不会把东西弄坏的。

#12

I recently had to center a "hidden" div (ie, display:none;) that had a tabled form within it that needed to be centered on the page. I wrote the following jQuery to display the hidden div & then update the CSS to the automatic generated width of the table and change the margin to center it. (The display toggle is triggered by clicking on a link, but this code wasn't neccessary to display.)

最近，我不得不将一个“隐藏”div(即display:none;)居中，其中包含一个需要集中在页面上的表格。我编写了以下jQuery来显示隐藏的div，然后将CSS更新为表格自动生成的宽度，并将页边距更改为居中。(显示切换是通过点击链接触发的，但这段代码不需要显示。)

NOTE: I'm sharing this code because Google brought me to this Stack Overflow solution & everything would have worked except that hidden elements don't have any width & can't be resized/centered until after they are displayed.

注意:我正在共享这段代码，因为谷歌将我带到这个堆栈溢出解决方案&除了隐藏的元素没有任何宽度，并且在显示之前不能调整大小/居中。

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

#13

The way I usually do it is using absolute position:

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

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

The outer div doesn't need any extra propertites for this to work.

外部div不需要任何额外的属性才能工作。

#14

For Firefox and Chrome:

Firefox和Chrome:

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

For Internet Explorer, Firefox, and Chrome:

对于Internet Explorer、Firefox和Chrome:

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

The text-align: property is optional for modern browsers, but it is necessary in Internet Explorer Quirks Mode for legacy browsers support.

文本对齐:属性对于现代浏览器是可选的，但是对于支持旧浏览器的Internet Explorer来说，它是必需的。

#15

This is my answer.

这是我的回答。

#outerDiv {
  width: 500px;
}

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

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

#16

Chris Coyier who wrote an excellent post on 'Centering in the Unknown' on his blog. It's a roundup of multiple solutions. I posted one that isn't posted in this question. It has more browser support then the flexbox-solution, and you're not using display: table; which could break other things.

Chris Coyier在他的博客上写了一篇关于“以未知为中心”的优秀文章。这是多解的综合。我贴了一个没有贴在这个问题上的。它比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;
}

#17

Another solution for this without having to set a width for one of the elements is using the CSS 3 transform attribute.

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

The trick is that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.

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

Here's a Fiddle showing horizontal and vertical alignment.

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

More information is on Mozilla Developer Network.

有关Mozilla开发人员网络的更多信息。

#18

I realize I'm pretty late to the game, but this is a very popular question, and I recently found an approach I haven't seen mentioned anywhere here, so I figured I'd document it.

我意识到我已经很晚了，但是这是一个非常流行的问题，我最近发现了一个我在这里没有见过的方法，所以我想我应该把它记录下来。

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

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

EDIT: both elements must be the same width to function correctly.

编辑:两个元素的宽度必须相同才能正确运行。

#19

Centering only horizontally

In my experience, the best way to center a box horizontally is to apply the following properties:

根据我的经验，将盒子水平居中的最好方法是应用以下属性:

The container:

• should have text-align: center;
• 应该text-align:中心;

The content box:

• should have display: inline-block;
• 应该显示:inline-block;

Demo:

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

See also this Fiddle!

看到这个小提琴!

---

Centering both horizontally & vertically

In my experience, the best way to center a box both vertically and horizontally is to use an additional container and apply the following properties:

根据我的经验，垂直和水平放置盒子的最佳方式是使用一个额外的容器并应用以下属性:

The outer container:

• should have display: table;
• 应该显示:表;

The inner container:

• should have display: table-cell;
• 应该显示:表格单元;
• should have vertical-align: middle;
• 应该vertical-align:中间;
• should have text-align: center;
• 应该text-align:中心;

The content box:

• should have display: inline-block;
• 应该显示:inline-block;

Demo:

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

See also this Fiddle!

看到这个小提琴!

#20

For example, see this link and the snippet below:

例如，请参见下面的链接和下面的代码片段:

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>

If you have a lot of children under a parent, so your CSS content must be like this example on fiddle.

如果你有很多子元素在父元素下，你的CSS内容必须像这个例子一样。

The HTML content look likes this:

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>

Then see this example on fiddle.

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

#21

The easiest way:

最简单的方法:

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

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

#22

Here is what you want in the shortest way.

这就是你想要的最短路径。

JSFIDDLE

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

#23

You can do something like this

你可以做这样的事情。

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

This will also align the #inner vertically. If you don't want to, remove the display and vertical-align properties;

这也将使#inner垂直对齐。如果不想，请删除显示和垂直对齐属性;

#24

This method also works just fine:

这种方法也很有效:

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

For the inner <div>, the only condition is that its height and width must not be larger than the ones of its container.

对于内部

，唯一的条件是它的高度和宽度不能大于它的容器。

#25

Well, I managed to find a solution that maybe will fit all situations, but uses JavaScript:

我找到了一个可能适用于所有情况的解决方案，但是使用了JavaScript:

Here's the structure:

的结构:

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

And here's the JavaScript snippet:

下面是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);
  })
});

If you want to use it in a responsive approach, you can add the following:

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

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

#26

Text-align: center

Applying text-align: center the inline contents are centered within the line box. However since the inner div has by default width: 100% you have to set a specific width or use one of the following:

应用文本对齐:将内联内容居中于行框中。但是，由于内部div默认宽度为100%，所以您必须设置一个特定的宽度，或者使用以下其中之一:

• display: block
• 显示:块
• display: inline
• 显示:内联
• display: inline-block
• 显示:inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

---

Margin: 0 auto

Using margin: 0 auto is another option and it is more suitable for older browsers compatibility. It works together with display: table.

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

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

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

---

Flexbox

display: flex behaves like a block element and lays out its content according to the flexbox model. It works with justify-content: center.

显示:flex的行为类似于块元素，并根据flexbox模型显示内容。它的工作原理是:中心。

Please note: Flexbox is compatible with most of the browsers but not all. See here for a complete and up to date list of browsers compatibility.

请注意:Flexbox兼容大多数浏览器，但不是所有浏览器。有关浏览器兼容性的完整和最新列表，请参阅这里。

#inner {
  display: inline-block;
}

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

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

---

Transform

transform: translate lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. To center horizontally it require position: absolute and left: 50%.

transform: translate允许您修改CSS可视化格式模型的坐标空间。使用它，元素可以被翻译、旋转、缩放和倾斜。在水平方向上，它要求位置:绝对和左:50%。

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

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

---

<center> (Deprecated)

The tag <center> is the HTML alternative to text-align: center. It works on older browsers and most of the new ones but it is not considered a good practice since this feature is obsolete and has been removed from the Web standards.

标签

是文本对齐的HTML替代品:center。它适用于较旧的浏览器和大多数新浏览器，但这并不是一个好的实践，因为这个特性已经过时，并且已经从Web标准中删除了。

#inner {
  display: inline-block;
}

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

#27

Try playing around with

试着玩

margin: 0 auto;

If you want to center your text too, try using:

如果你也想把文字居中，试着使用:

text-align: center;

#28

Flex have more than 97% browser support coverage and might be the best way to solve these kind of problems within few lines:

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

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

#29

One option existed that I found:

我发现有一个选项:

Everybody says to use:

每个人都说使用方法:

margin: auto 0;

But there is another option. Set this property for the parent div. It works perfectly anytime:

但还有另一个选择。为父div设置此属性。它在任何时候都可以很好地工作:

text-align: center;

And see, child go center.

看，孩子走到中心。

And finally CSS for you:

最后是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 */
}

#30

If width of the content is unknown you can use the following method. Suppose we have these two elements:

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

• .outer -- full width
• .outer——全宽
• .inner -- no width set (but a max-width could be specified)
• .inner——无宽度设置(可指定最大宽度)

Suppose the computed width of the elements are 1000px and 300px respectively. Proceed as follows:

假设计算的元素宽度分别为1000px和300px。进行如下:

1. Wrap .inner inside .center-helper
2. 包装在里面.center-helper
3. Make .center-helper an inline block; it becomes the same size as .inner making it 300px wide.
4. 使.center-helper成为内联块;它的大小和。inner，内心的，300像素宽。
5. Push .center-helper 50% right relative to its parent; this places its left at 500px wrt. outer.
6. 中心助手相对于它的父母有50%的权利;左边是500px wrt。外。
7. Push .inner 50% left relative to its parent; this places its left at -150px wrt. center helper which means its left is at 500 - 150 = 350px wrt. outer.
8. 内部50%相对于父类;左边是-150px wrt。中心助手，意思是它的左边是500 - 150 = 350px wrt。外。
9. Set overflow on .outer to hidden to prevent horizontal scrollbar.
10. 将溢出设置为.outer设置为隐藏，以防止水平滚动条。

Demo:

演示:

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