我试图在另一个div元素中垂直居中一个span或div元素。然而,当我输入vertical-align: middle时,什么都没有发生。我试着改变这两个元素的显示属性,但似乎都不起作用。

这是我目前在我的网页上做的事情:

.main { 身高:72 px; vertical-align:中间; 边框:1px纯黑色; 填充:2 px; } 在{ vertical-align:中间; 边框:1px纯红色; } 接着{ 边框:1px纯蓝色; } < div class = "主" > < div class = "内部" > 这个盒子应该放在大盒子的中间 <div class="second">这里还有一个盒子</div> < / div > < / div >

下面是实现的jsfiddle,显示它不起作用:http://jsfiddle.net/gZXWC/


当前回答

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

我们设置父div显示为表格,子div显示为表格单元格。然后我们可以在子div上使用vertical-align并将其值设置为middle。这个子div中的任何内容都将垂直居中。

其他回答

万一你不能依靠flexbox…把孩子放在父母的中心。当像素大小未知时(换句话说,总是如此),在IE9+上也没有问题。

.parent{位置:相对的;} .child { 位置:绝对的; 上:50%; 左:50%; -ms-transform: -50%, -50%; 转换:翻译(-50%,-50%); } <div class="parent" style="background: lightyyellow;填充:6 em”> <div class="child" style="background:gold;填充:1 em >本;< / div > < / div >

这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间,这是现在应该做的:

.main { 显示:表; /*可选CSS start */ 身高:90 px; 宽度:90 px; /*可选CSS end */ } 在{ 边框:1px实体#000000; 显示:表格单元; vertical-align:中间; } < div class = "主" > <div class="inner">这个</div> . < / div >

将line-height设置为包含div的相同高度也可以

演示http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

你应该把垂直对齐:中间放在内部元素,而不是外部元素。在外部元素上设置line-height属性以匹配外部元素的高度。然后在内部元素上设置display: inline-block和line-height: normal。通过这样做,内部元素上的文本将以正常的行高换行。支持Chrome, Firefox, Safari和IE 8+

.main { 身高:72 px; 行高:72 px; 边框:1px纯黑色; } 在{ 显示:inline-block; vertical-align:中间; 行高:正常; } < div class = "主" > <div class="inner">垂直居中的文本</div> < / div >

小提琴

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

我们设置父div显示为表格,子div显示为表格单元格。然后我们可以在子div上使用vertical-align并将其值设置为middle。这个子div中的任何内容都将垂直居中。