Html 垂直居中另一个div内的div

Vertically centering a div inside another div

提问by user700284

I want to center a div which is added inside another div.

我想将添加到另一个 div 中的 div 居中。

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

This is the CSS I am currently using.

这是我目前使用的 CSS。

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

As you can see,the approach I use now depends on values for width and height of innerDiv.If the width/height changes, I will have to modify the margin-topand margin-leftvalues.Is there any generic solution that I can use to center the innerDivalways irrespective of its size?

如您所见，我现在使用的方法取决于 的宽度和高度的值innerDiv。如果宽度/高度发生变化，我将不得不修改margin-top和 值。margin-left是否有任何通用的解决方案可以用来innerDiv始终居中它的大小？

I figured out that using margin:autocan horizontally allign the innerDiv to the middle.But what about vertical allign middle?

我发现使用margin:auto可以将innerDiv水平对齐到中间。但是垂直对齐中间呢？

回答by meo

tl;dr

tl;博士

Vertical align middle works, but you will have to use table-cellon your parent element and inline-blockon the child.

垂直对齐中间有效，但您必须table-cell在父元素和inline-block子元素上使用。

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

此解决方案不适用于 IE6 和 7。
您的解决方案是更安全的方法。
但是由于您使用 CSS3 和 HTML5 标记了您的问题，我认为您不介意使用现代解决方案。

The classic solution (table layout)

经典解决方案（表格布局）

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performanceso I would suggest that you use one of the more modern solutions.

这是我原来的回答。它仍然可以正常工作，并且是获得最广泛支持的解决方案。表格布局会影响您的渲染性能，因此我建议您使用一种更现代的解决方案。

Here is an example

这是一个例子

---

---

Tested in:

测试于：

• FF3.5+
• FF4+
• Safari 5+
• Chrome 11+
• IE9+

• FF3.5+
• FF4+
• Safari 5+
• 铬 11+
• IE9+

---

---

HTML

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

---

---

Modern solution (transform)

现代解决方案（转换）

Since transforms are fairly well supported nowthere is an easier way to do it.

由于现在转换得到了很好的支持，因此有一种更简单的方法来做到这一点。

CSS

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

演示

---

---

? my favourite modern solution (flexbox)

? 我最喜欢的现代解决方案（flexbox）

I started to use flexbox more and more its also well supported nowIts by far the easiest way.

我开始越来越多地使用 flexbox，它现在也得到了很好的支持，这是迄今为止最简单的方法。

CSS

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

演示

More examples & possibilities: Compare all the methods on one pages

更多示例和可能性： 比较一页上的所有方法

回答by user700284

Another way of achieving this horizontal and vertical centering is:

实现这种水平和垂直居中的另一种方法是：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(Reference)

（参考）

回答by rnrneverdies

Another way is using Transform Translate

另一种方法是使用 Transform Translate

Outer Div must set its positionto relativeor fixed, and the Inner Div must set its positionto absolute, topand leftto 50%and apply a transform: translate(-50%, -50%).

Outer Div 必须将其设置position为relativeor fixed，而 Inner Div 必须将其设置position为absolute，top并且leftto50%并应用 a transform: translate(-50%, -50%)。

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}

<div class="cn">
    <div class="inner">
        test
    </div>
</div>

Tested in:

测试于：

• Opera 24.0(minimum 12.1)
• Safari 5.1.7(minimum 4 with -webkit- prefix)
• Firefox 31.0(minimum 3.6 with -moz- prefix, from 16 without prefix)
• Chrome 36(minimum 11 with -webkit- prefix, from 36 without prefix)
• IE 11, 10(minimum 9 with -ms- prefix, from 10 without prefix)
• More browsers, Can I Use?

• Opera 24.0（最低 12.1）
• Safari 5.1.7（最少 4 个，带有 -webkit- 前缀）
• Firefox 31.0（最低 3.6 带 -moz- 前缀，从 16 起不带前缀）
• Chrome 36（最少 11 个带 -webkit- 前缀，从 36 起不带前缀）
• IE 11, 10（最少 9 个带 -ms- 前缀，从 10 起不带前缀）
• 更多浏览器，我可以使用吗？

回答by drjorgepolanco

Vertical Align Anything with just 3 lines of CSS

只需 3 行 CSS 即可垂直对齐任何内容

HTML

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Simplest

最简单

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

According to shouldiprefixthis are the only prefixes you need

根据shouldiprefix这是您需要的唯一前缀

You can also use % as the value for the 'height' property of .parent-of-element, as long as parent of element has height or some content that expands its vertical size.

您还可以使用 % 作为 .parent-of-element 的 'height' 属性的值，只要元素的父元素具有高度或某些扩展其垂直大小的内容即可。

回答by Iron Pillow

Instead of tying myself in a knot with hard-to-write and hard-to-maintain CSS (that also needs careful cross-browser validation!) I find it far better to give up on CSS and use instead wonderfully simple HTML 1.0:

与其将自己与难以编写和难以维护的 CSS 捆绑在一起（这也需要仔细的跨浏览器验证！），我发现放弃 CSS 转而使用非常简单的 HTML 1.0 会好得多：

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

This accomplishes everything the original poster wanted, and is robust and maintainable.

这完成了原始海报想要的一切，并且是健壮和可维护的。

回答by Nishant Singh

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }

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

you can do it by simply adding css style mentioned above. All the best. For any query please comment

你可以通过简单地添加上面提到的css样式来做到这一点。祝一切顺利。如有任何疑问，请发表评论

回答by Harry Robbins

I personally prefer the trick of using a hidden pseudo element to span the full height of the outer container, and vertically aligning it with the other content. Chris Coyier has a nice article on the technique. http://css-tricks.com/centering-in-the-unknown/The huge advantage of this is scalability. You don't have to know the height of the content or worry about it growing/shrinking. This solution scales :).

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐的技巧。Chris Coyier 有一篇关于这项技术的好文章。http://css-tricks.com/centering-in-the-unknown/这样做的巨大优势是可扩展性。您不必知道内容的高度或担心它的增长/缩小。此解决方案可扩展:)。

Here's a fiddle with all the CSS you'll need and a working example. http://jsfiddle.net/m5sLze0d/

这是一个包含您需要的所有 CSS 和一个工作示例的小提琴。 http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

回答by Volomike

Vertically centering div items inside another div

垂直居中另一个 div 内的 div 项目

Just set the container to display:tableand then the inner items to display:table-cell. Set a heighton the container, and then set vertical-align:middleon the inner items. This has broad compatibility back as far as the days of IE9.

只需将容器设置为display:table，然后将内部项目设置为display:table-cell。height在容器上设置 a ，然后vertical-align:middle在内部项目上设置。早在 IE9 时代，它就具有广泛的兼容性。

Just note that the vertical alignment will depend on the height of the parent container.

请注意，垂直对齐将取决于父容器的高度。

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}

<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

回答by Majid

When your heightis not set (auto); you can give inner div some padding (top and bottom) to make it vertically center:

当您height未设置时（自动）；您可以给内部 div 一些填充（顶部和底部）以使其垂直居中：

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

回答by Friend

Fiddle Link < http://jsfiddle.net/dGHFV/2515/>

小提琴链接 < http://jsfiddle.net/dGHFV/2515/>

Try this

尝试这个

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }