垂直地将一个div置于另一个div中

[英]Vertically centering a div inside another div


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

如您所见,我现在使用的方法取决于innerDiv的宽度和高度的值。如果宽度/高度改变,我将不得不修改margin-top和margin-left值。有没有什么通用的解决方案,我可以用它来中心,不管它的大小?

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

我发现了使用margin:auto can水平地将innerDiv压缩到中间。但是垂直的鳄鱼中间呢?

23 个解决方案

#1


589  

tl;dr

博士tl;

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

垂直对齐中间的工作,但是您将不得不使用表格单元格在您的父元素和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和ie7中是行不通的。你的方法更安全。但是既然你用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 performance so I would suggest that you use one of the more modern solutions.

这是我最初的答案。它仍然运行良好,是最广泛支持的解决方案。表布局将影响您的呈现性能,因此我建议您使用一种更现代的解决方案。

Here is an example

这是一个例子


Tested in:

测试:

  • FF3.5+
  • FF3.5 +
  • FF4+
  • FF4 +
  • Safari 5+
  • Safari 5 +
  • Chrome 11+
  • Chrome 11 +
  • IE9+
  • 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 now there 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 now Its 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

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

#2


104  

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)

(参考)

#3


41  

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必须将其位置设置为相对或固定,内部Div必须将其位置设置为绝对、顶部和左侧为50%,并应用转换: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)
  • Opera 24.0(最低12.1)
  • Safari 5.1.7 (minimum 4 with -webkit- prefix)
  • Safari 5.1.7(带有-webkit-前缀的最小4)
  • Firefox 31.0 (minimum 3.6 with -moz- prefix, from 16 without prefix)
  • firefox31.0(最低3.6为-moz-前缀,16为无前缀)
  • Chrome 36 (minimum 11 with -webkit- prefix, from 36 without prefix)
  • Chrome 36(至少有11个带-webkit-前缀,36个无前缀)
  • IE 11, 10 (minimum 9 with -ms- prefix, from 10 without prefix)
  • IE 11, 10(最小9,带-ms-前缀,不带前缀的10)
  • More browsers, Can I Use?
  • 我可以使用更多的浏览器吗?

#4


37  

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

您还可以使用%作为. part -of元素的“height”属性的值,只要元素的父元素有高度或某些内容扩展其垂直大小。

#5


17  

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.

这实现了原始海报所需的所有内容,并且健壮且可维护。

#6


5  

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有一篇关于技术的好文章。它的巨大优势是可扩展性。你不必知道内容的高度,也不必担心内容的增长或缩小。这个解决方案尺度:)。

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

#7


2  

I have been using the following solution since over a year, it works with IE 7 and 8 as well.

我已经用了一年多的时间来解决这个问题,它和ie7和8也一样。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

#8


2  

This works for me. Width and hight of the outer div can be defined.

这适合我。可以定义外部div的宽度和高度。

Here the code:

下面的代码:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

#9


2  

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

#10


2  

If you still didn't understand after reading the marvellous answers given above.

如果你在阅读了上面的精彩答案后仍然没有理解。

Here are two simple examples of how you can achieve it.

这里有两个简单的例子来说明你是如何做到这一点的。

Using display: table-cell

使用显示:表格单元

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

Using flex-box (display: flex)

使用flex-box(显示:flex)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

Note: Check the browser compatibility of display: table-cell and flex before using the above mentioned implementations.

注意:在使用上述实现之前,请检查display: table-cell和flex的浏览器兼容性。

#11


2  

enter image description here 100% it works

在这里输入图像描述100%有效

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

#12


2  

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

当你的身高没有设置(自动);你可以给内部div设置一些填充(顶部和底部)以使其垂直居中:

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

#13


2  

#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 query write comment

只需添加上面提到的css样式即可。愿一切都好!对于查询写评论

#14


2  

Vertically centering div items inside another div

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

只需将容器设置为display:table,然后是要显示的内部项:table-cell。在容器上设置高度,然后在内部项上设置垂直对齐:居中。这可以追溯到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>

#15


1  

for innerdiv which do not specify it's height value,there is no pure css solution to make it vertically centered.a javascript solution could be get the innerdiv's offsetHeight,then calculate the style.marginTop.

对于未指定高度值的innerdiv,没有纯css解决方案使其垂直居中。javascript解决方案可以获取innerdiv的offsetHeight,然后计算style.marginTop。

#16


1  

You can do this with a simple javascript (jQuery) block.

您可以使用一个简单的javascript (jQuery)块来实现这一点。

CSS:

CSS:

#outerDiv{
    height:100%;
}

Javascript:

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

#17


1  

try to align inner element like this:

试着像这样对齐内部元素:

top: 0;
bottom: 0;
margin: auto;
display: table;

and of course:

当然:

position: absolute;

#18


1  

You can center the div vertically and horizontally in CSS using flex;

您可以使用flex在CSS中垂直和水平地居中div;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

And the second one is as following;

第二个是这样的;

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

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

And the resulting HTML:

和由此产生的HTML:

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

#19


1  

This will work way back to IE6!

这将回到IE6!

<!DOCTYPE html> is required on IE6 too! [ will force IE6 default strict mode as well ].

< !IE6也需要DOCTYPE html> ![将强制IE6默认的严格模式]。

( of course, the box coloring is for demo purposes only )

(当然,框色只用于演示)

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

#20


0  

text align-center on parent element, display inline-block on child element. This will center all most anything. I believe its call a "block float".

在父元素上显示文本对齐中心,在子元素上显示行块。这将是最重要的。我相信它叫做“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

This is also a good alternative for float's, good luck!

这也是花车的好选择,祝你好运!

#21


0  

Vertically centering a div inside another div

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

#22


0  

To center align both vertically and horizontally:

垂直对齐和水平对齐:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

#23


-6  

I know that question was created year ago... Anyway thanks CSS3 you can easily vertically aligns div in div (example there http://jsfiddle.net/mcSfe/98/)

我知道这个问题是一年前提出的……总之,谢谢CSS3,你可以很容易地在div中垂直对齐div(例如http://jsfiddle.net/mcSfe/98/)

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/06/27/f3dbdbdded5de728fa87bb9797292027.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com