垂直地將一個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