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

Vertically centering a div inside another div

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

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

这是我目前使用的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-top和margin-left值。是否存在任何通用解决方案无论大小如何，我都可以使用innerDiv来居中？

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

相关讨论

垂直居中是一个非常普遍的问题 - 您可以在这里找到更多提示：jakpsatweb.cz/css/css-vertical-center-solution.html
如果你做margin-top怎么办：auto; margin-bottom：auto;
jsfiddle.net/k6ShD/4
以下是两种简单的方法来将div中的div，垂直，水平或两者(纯CSS)居中：stackoverflow.com/a/31977476/3597276
css-vertical-center.com有一些带有浏览器兼容性信息的解决方案
其他人的建议是正确的。只是补充一下。如果您有名为DivParent的父div和名为ChildDiv的子div，则只需将margin：auto添加到子div，这将使childDiv或innerDiv成为ParentDiv的中心。

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如果不需要居中文本，OP是否需要将任何文本包装在另一个容器中？
你可以为内部div重置它：jsfiddle.net/mcSfe/2
在我看来很好。好的解决方案
+1 - 但读者应该知道meo只能得到这个答案，因为帖子被标记为html5和css3
烦人的IE有一些复杂的解决方法，但他们需要一些额外的标记:( jakpsatweb.cz/css/css-vertical-center-solution.html
谢谢。 :)它工作。我根据你的第二个链接重置内部div的文本，这就是我想要的。
别客气
虽然这确实有效，但它可以作为一个干净的例子，说明为什么CSS有如此大的缺陷。像这样简单的东西不应该需要cludges和解决方法。
在父元素中包含display: table;有多重要？
有关该主题的更完整答案，请参阅jsfiddle.net/FpPrn！我还要提一下，显示：table-cell有很长的路要走，为了使答案更加完整，可以将cn div包装在另一个中，其显示设置为table！
然而我无法设置位置：绝对的元素与显示：table-cell对吗？
@aokaddaoc table-cell和position:absolute永远不会玩得很好，只需尝试其他方法;)
解决方案是在div之外包装另一个div {display：table-cell; }
您似乎在flexbox示例中缺少容器的"display：flex"。
@CpnCrunch我没有;)检查示例：codepen.io/meodai/pen/XbEqZw?editors=010其第4个
是的，你的例子是正确的。我在谈论你的答案中的代码(这里)。你似乎有"position：flex"，它似乎不是一个有效的css属性。
@CpnCrunch我的坏，我把它改成显示：flex。
@AndrewS或者是一个很好的例子，表明大多数设计师仍然像印刷设计师那样设计......
这个答案在经过3个小时的摆弄并且试图表明div垂直对齐后结束了我的沮丧。这个flex示例工作得很好，而且由于客户使用IE11 / Chrome，我可以毫无问题地使用它。非常感谢！
一个问题，似乎cn类的高度需要用绝对像素设置，它不适用于高度：100％;哦。刚刚设置cn位置时发现：绝对。这样可行。谢谢！
Fexbox解决方案很棒:)
我花了大约5个小时来集中div(授予棘手)，网上有许多不起作用的解决方案(即使在stackoverflow上)。即使分组居中在父div中嵌套15次，这个就像魅力一样！谢谢@meo！
如果我设置min-height，这对IE11不起作用... developer.microsoft.com/en-us/microsoft-edge/platform/issues/
Flexbox运行良好，谢谢。我还添加了height: inherit
flexbox完成了这项工作！
@meo，我认为您的答案将受益于以下编辑：反转Flexbox和Table部分的位置。 Flexbox摇滚！
很好的答案。你最喜欢的也是我最喜欢的。谢谢

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

1
2
3
4
5

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

(参考)

相关讨论

+1，但奇怪的是取决于职位的顺序。开始bottom: 0; left: 0;会将内部div卡在父级的底部(Chrome 33，无论如何)。
在我希望你的div在我的情况下对齐的方向中定义0，在搜索表格中，它是.search-header{ margin:auto; top:0px; bottom:0px; right:0px; }没有'左'对齐以继续前一个的顺序和位置
这比上面投票的答案更容易，更好
并且无需精确地确定父div必须定位
我会说这是优秀的解决方案，但只有当您的内部元素的高度可以提前指定时。例如，这使得它不适合垂直居中流动的文本。
不适用于左侧，始终与左侧对齐(OS / X Chrome 66.0.3359.117)

另一种方法是使用Transform Translate

外部Div必须将position设置为relative或fixed，并且内部Div必须将其position设置为absolute，top和left设置为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;

}

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个没有前缀)
更多浏览器，我可以使用吗？

相关讨论

这段代码的最好的部分是它与全宽外部div完美配合。很好！

垂直对齐任何只有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的父元素具有高度或某些内容可以扩展其垂直大小。

相关讨论

不能告诉你为什么，但在我的情况下，当我使用(50％)而不是(-50％)在translateY时，这完美地工作...
我喜欢这种优雅的解决方案。唯一的问题是，如果用户将他们的浏览器压缩到100px高(例如)，我会失去居中的顶部，这对我来说是有问题的，因为我想要我的标题出于审美/设计原因。但是说实话，我非常喜欢这个解决方案，我甚至不确定我在乎！
KjetilNordin，根据您的布局，当您使用50％而不是-50％时，它有时会起作用。但只要中心元素的容器有高度，-50％就可以完美地工作。

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

1
2
3
4
5
6

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

相关讨论

大多数人认为这不是一个好习惯，我同意。像"表"这样的标记元素不应该用于布局。如果您实际显示表格数据，请使用表格。
如果您认为样式超过可维护代码，那么您的关注是有效的。其他人可能会以不同的方式衡量这两个因素，他们应该看到所有选择。
我认为这个解决方案绝对是跨浏览器的绝佳选择
正如@Milan所说，这个解决方案并不完美。但两者都不是。
尽管CSS纳粹和他们对表的仇恨，我发现这个解决方案远比堆积依赖于表格单元格式的神秘CSS指令要好得多。处于当前状态的CSS根本无法正确处理。
一票暗示css正在积累一堆变通方法(至少在术语中)来实现这个简单的事情。对于开发人员来说，这绝对是一个更易于管理的解决方案，我希望将来不再需要它。
我更喜欢这种解决方案的简单性和可维护性。
谷歌强制要求遵守RWD标准将会杀死桌子。否则，我同意：桌子在他们的鼎盛时期工作得非常漂亮，并且一直都是痛苦的，以便能够干净利落地运作。
我不得不在这里脱离其他评论员，并说我不同意这更容易理解，也更容易理解，但更简单。在讨论可管理性和理解的想法时，我只能假设我们正在考虑让后来的开发人员能够识别我们的"理由"。当使用专门用于垂直对齐的表格元素时，这些机制无疑是简单的，但你的理由并不清楚，后来的开发人员可能会想知道正在做什么。从某种意义上说，CSS类虽然复杂，却更加明确。
@WebWanderer：(1)valign-"middle"似乎很清楚。 (2)如果不清楚是一个问题，很容易添加评论。 (3)在查看最高投票的答案时，我可以毫不犹豫地说，它的含义对我来说是不透明的。 (4)如果两段代码或标记完成相同的事情，那么根据定义它们是同等权威的。我认为你所寻找的这个词是"明显的"，这是旁观者的眼睛。即是主观的。
我个人更喜欢DIV到桌面的干净HTML标记，特别是因为如果我打算重新设置页面皮肤，我不一定要更改HTML。我可以改变CSS，而我觉得更局限于表中的每一行。

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐。
克里斯科伊尔有一篇关于这项技术的好文章。 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;

}

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

这适合我。可以定义外部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：

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

CSS：

1
2
3

#outerDiv{
height:100%;
}

使用Javascript：

1
2
3
4

这将回到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;
}

对于没有指定它的高度值的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


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

相关讨论

这在Safari中似乎不起作用。
这仅适用于使用Mozilla框架(如Firefox)的浏览器。提供/使用非跨浏览器友好的代码是不好的做法。