找到你要的答案

Q:Vertically centering a div inside another div

Q:在另一个DIV DIV垂直居中

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?

我想中心的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;
    }

你可以看到,我现在使用的方法取决于宽度和高度innerdiv值。如果宽度/高度的变化,我将不得不修改边距和左边距值。有没有通用的解决方案,我可以使用中心的innerdiv总是无论其规模如何?

我发现使用保证金:汽车可以横向allign的innerdiv到中东。但对于垂直allign中间吗?

answer1: 回答1:

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

TL;DR

垂直对齐中间工作,但您必须在父元素上使用表单元格,并在孩子上使用内联块。

这个解决方案是不打算在IE6及工作;7。你是更安全的方式去为那些。但既然你标记你的问题与CSS3和HTML5我想你不介意使用现代的解决方案。

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

这是我最初的答案。它仍然运作良好,是最广泛的支持的解决方案。表布局将影响您的渲染性能,所以我建议您使用更现代的解决方案之一。

这里是一个例子


测试:

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

现代解(变换)

由于变换是相当好的支持现在有一个更简单的方法来做。

CSS

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

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

演示


我最喜欢的♥现代溶液(flexbox)

我开始使用flexbox越来越多也很好的支持,现在其迄今为止最简单的方式。

CSS

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

.inner {
  align-self: center;
}

演示

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

answer2: 回答2:

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)

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

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

(参考)

answer3: 回答3:

Another way is using Transform Translate

Outer Div must set its position to relative or fixed, and the Inner Div must set its position to absolute, top and left to 50% and apply 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?

Another way is using Transform Translate

外层的div必须设置其位置相对或固定,和内部的div必须设置它的位置,绝对的,顶部和左侧的50%和应用变换:翻译(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>

测试:

  • 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?
answer4: 回答4:

Vertical Align Anything with just 3 lines of CSS

HTML

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

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

&l

垂直对齐任何东西3行的CSS

HTML

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

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

&l
html  css  html5  css3