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

问题描述

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

<div id="innerDiv">

这是我目前使用的 CSS.

 #outerDiv {宽度:500px；高度:500px；位置:相对；}#innerDiv {宽度:284px；高度:290px；位置:绝对；顶部:50%；左:50%；边距顶部:-147px；左边距:-144px；}

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

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

解决方案

tl;博士

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

此解决方案不适用于 IE6 &7.
对于那些人来说，你的方法更安全.
但是由于您使用 CSS3 和 HTML5 标记了您的问题，我认为您不介意使用现代解决方案.

经典解决方案(表格布局)

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

这是一个例子

<小时>

测试:

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

<小时>

HTML

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

CSS

.cn {显示:表格单元格；宽度:500px；高度:500px；垂直对齐:中间；文本对齐:居中；}.内{显示:内联块；宽度:200px；高度:200px；}

<小时>

现代解决方案(转换)

由于转换现在得到了很好的支持，因此有一种更简单的方法可以做到.

CSS

.cn {位置:相对；宽度:500px；高度:500px；}.内{位置:绝对；顶部:50%；左:50%；变换:翻译(-50%，-50%)；宽度:200px；高度:200px；}

演示

<小时>

♥ 我最喜欢的现代解决方案 (flexbox)

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

CSS

.cn {显示:弹性；对齐内容:居中；对齐项目:居中；}

演示

更多例子 &可能性:比较一页上的所有方法

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 independently of its size?

I figured out that using margin: auto can horizontally align the innerDiv to the middle. But what about vertical align 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+
• 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 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;
  align-items: center; 
}

Demo

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

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