关于html:在另一个div内垂直居中一个div

Vertically centering a div inside another div

本问题已经有最佳答案,请猛点这里访问。

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

1
 

这是我目前使用的CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    #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的宽度和高度值。如果宽度/高度发生变化,我将不得不修改margin-topmargin-left值。是否存在任何通用解决方案 无论大小如何,我都可以使用innerDiv来居中?

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


TL;博士

垂直对齐中间作品,但您必须在父元素上使用table-cell并在子元素上使用inline-block

这个解决方案在IE6和7中不起作用。你的解决方案更安全。但是,既然您使用CSS3和HTML5标记了您的问题,我认为您不介意使用现代解决方案。

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

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

这是一个例子

测试中:

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

HTML

1
your content

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

现代解决方案(转型)

由于现在转换得到了很好的支持,因此有一种更简单的方法。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.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

1
2
3
4
5
.cn {
  display: flex;
  justify-content: center;
  align-items: center;
}

演示

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


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

1
2
3
4
5
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(参考)


另一种方法是使用Transform Translate

外部Div必须将position设置为relativefixed,并且内部Div必须将其position设置为absolutetopleft设置为50%并应用transform: translate(-50%, -50%)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
 
}
1
        test

测试中:

  • Opera 24.0(最低12.1)
  • Safari 5.1.7(至少4个带有-webkit-前缀)
  • Firefox 31.0(带有-moz-前缀的最小3.6,不带前缀的16)
  • Chrome 36(至少11个带-webkit-前缀,36个没有前缀)
  • IE 11,10(最少9个带-ms-前缀,10个没有前缀)
  • 更多浏览器,我可以使用吗?


垂直对齐任何只有3行CSS

HTML

1
2
3
        <p>
Hello
</p>

简单

1
2
3
4
5
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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%);
}

根据shouldiprefix,这是你需要的唯一前缀

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


而不是把自己绑在一个难以编写和难以维护的CSS(这也需要仔细的跨浏览器验证!)的结,我发现放弃CSS并使用非常简单的HTML 1.0更好:

1
2
3
4
5
6
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

这可以完成原始海报所需的一切,并且功能强大且易于维护。


我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度,并将其与其他内容垂直对齐。
克里斯科伊尔有一篇关于这项技术的好文章。 http://css-tricks.com/centering-in-the-unknown/
这方面的巨大优势是可扩展性。您不必知道内容的高度,也不必担心内容的增长/缩小。这个解决方案缩放:)。

这里有一个你需要的所有CSS的小提琴和一个工作示例。
http://jsfiddle.net/m5sLze0d/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}

将div项目垂直居中在另一个div中

只需将容器设置为display:table,然后将内部项设置为display:table-cell。在容器上设置height,然后在内部项目上设置vertical-align:middle。就IE9的时代而言,它具有广泛的兼容性。

请注意,垂直对齐将取决于父容器的高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
1
2
  Item 1
  Item 2


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

       
    }
1
Inner Div

你可以通过简单地添加上面提到的css样式来实现。祝一切顺利。用于查询写评论


height未设置(自动)时;你可以给内部div一些填充(顶部和底部)使其垂直居中:

1
    <!--content-->


我一直使用以下解决方案一年多来,它也适用于IE 7和8。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>


   
   
        <p>
Line 1
</p>
        <p>
Line 2
</p>

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

这里的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}
1
    Put here your text or div content!


小提琴链接

试试这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   #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;
    }

如果你在阅读上面给出的奇妙答案后仍然不明白。

以下是两个如何实现它的简单示例。

Using display: table-cell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
}
1
    Center align a div using"display: table-cell"

Using flex-box (display: flex)

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
1
        Centering a div using"display: flex"

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


在这里输入图像描述100%它的工作原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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%;
}

   
     
      sdfd

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#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;

}

第二个是如下;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    #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;
    }

结果HTML:

1
 

你可以用一个简单的javascript(jQuery)块来做到这一点。

CSS:

1
2
3
#outerDiv{
    height:100%;
}

使用Javascript:

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

这将回到IE6!

IE6也需要
[将强制IE6默认严格模式]。

(当然,盒子着色仅用于演示目的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    #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)}
1
     The inner DIV


将div垂直居中于另一个div内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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;
}
1
 


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


尝试对齐内部元素,如下所示:

1
2
3
4
top: 0;
bottom: 0;
margin: auto;
display: table;

而且当然:

1
position: absolute;


我想展示另一种可以使用CSS3 calc()解决这个问题的跨浏览器方式。

我们可以使用calc()函数来控制子div的margin-top属性,当它相对于父div位于绝对位置时。

使用calc()的主要优点是可以随时更改父元素高度,并且子div将始终与中间对齐。

margin-top计算是动态完成的(通过css而不是脚本,这是一个非常大的优势)。

看看这个现场演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always            
           center vertically the child inside the parent */

        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
   
     
     
   
  </body>
</html>

输出:

enter image description here


父元素上的文本对齐中心,在子元素上显示内联块。这将集中所有任何东西。我相信它的称呼是"块浮动"。

1
2
3
4
5
6
7
8
9
10
11
12
13
  some content
<!-- end outer -->

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

这也是浮动的好选择,祝你好运!


要垂直和水平居中对齐:

1
2
3
4
5
6
7
8
9
#parentDiv{
    display:table;
    text-align:center;
}

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

我知道这个问题是在一年前创建的...
无论如何,感谢CSS3你可以很容易地垂直对齐div中的div(例如http://jsfiddle.net/mcSfe/98/)

1
2
3
4
5
6
7
8
9
Go to Hell!



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