我试图在另一个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/


当前回答

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

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

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

其他回答

下面设置CSS

 /*Parent*/
 display: table;

/*immediate child*/
display: table-cell;
vertical-align: middle;

~拉胡尔Daksh

使用CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
}

使用"justify-content: center;"来水平对齐元素

注意:这可能无法在旧的IE中工作

这很简单。只需在主类中添加display:table-cell。

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

看看这个jsfiddle!

这是一个现代的方法,它利用CSS Flexbox功能。 现在,只需将这些样式添加到.main容器中,就可以垂直对齐父容器中的内容

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; // To center align it horizontally as well
}

你也可以使用CSS网格(一个二维网格布局系统)。

.main {
  display: grid;
  justify-content: center;
  align-content: center;
}

下面是一个简写方法,但浏览器的支持仍然很低- https://caniuse.com/?search=place-items。

    .main {
      display: grid; // flex  -  works for both
      place-items: center;
    }

你就可以开始了!

万一你不能依靠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 >