垂直居中一个div在另一个div [英] Vertically centering a div inside another div

问题描述

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

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

这是我目前使用的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; 
} 
  

正如你所看到的，我现在使用的方法取决于宽度和如果宽度/高度改变，我将修改 margin-top 和<$ c的高度 innerDiv $ c> margin-left values.Is有没有一个通用的解决方案，我可以用来集中 innerDiv 总是不管它的大小？

我发现使用 margin：auto 可以水平地将innerDiv指定到中间。 / p>

解决方案

tl; dr

垂直对齐中间格式，但必须使用

$ b 解决方案不会在IE6& 7.
你的这些是更安全的方式。
但是，由于您使用CSS3和HTML5标记了您的问题，我认为您不介意使用现代解决方案。

布局）

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

以下是示例

---

：

• FF3.5


• FF4


• Safari 5


• Chrome 11和12


• IE9

---

HTML

  div class =cn>< div class =inner>您的内容< / div>< / div& 
  

CSS

  .cn {
 display：table-cell; 
 width：500px; 
 height：500px; 
 vertical-align：middle; 
 text-align：center; 
} 
 
 .inner {
 display：inline-block; 
 width：200px; height：200px; 
} 
  

---

（transform）

由于变换是

CSS

b $ b

  .cn {
 position：relative; 
 width：500px; 
 height：500px; 
} 
 
 .inner {
 position：absolute; 
 top：50％;左：50％; 
 transform：translate（-50％， -  50％）; 
 width：200px; 
 height：200px; 
} 
  

演示

---

♥我最喜欢的最新解决方案）

我越来越多地使用flexbox 它现在也支持现在它是迄今为止最简单的方法。

CSS

  .cn {
 display：flex; 
 justify-content：center; 
} 
 
 .inner {
 align-self：center; 
} 
  

演示

更多示例&可能性：
在一个页面上比较所有方法

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

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

This is the CSS I am currently using.

    #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-top and margin-left values.Is there any generic solution that I can use to center the innerDiv always irrespective of its size?

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

解决方案

tl;dr

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

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.

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 performance so 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 & 12
• IE9

---

HTML

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

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 now there is an easier way to do it.

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 most modern solution (flexbox)

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

CSS

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

.inner {
  align-self: center;
}

Demo

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

这篇关于垂直居中一个div在另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！