html - 我如何垂直居中？

Question

这是我正在尝试开发的页面。我希望选项卡中的文本和气泡中的电影居中。我发现的所有东西都不能正常工作。此页面上的所有position: absolute内容均以百分比定义，但气泡内的实际内容除外。

索引.css

#movie {
    margin-top: auto;
    margin-bottom: auto;
    display: table-cell;
    vertical-align: middle;
    ...
}
#movie-bubble {
    vertical-align: middle;
    text-align: center;
    display: table;
}

根.css

.tab {
    vertical-align: middle;
    text-align: center;
    margin: auto;
}

我究竟做错了什么？

编辑：对人们说display: table-cell，&c：这不起作用。

Answer 1

你需要设置它所在的 divdisplay: table;

以及您要居中的文本：

display: table-cell;
vertical-align: middle;

Answer 2

要在 a 中居中内容div，请执行以下操作：

到外面div：

display: table;

到里面div：

display: table-cell;
vertical-align: middle;

Answer 3

尝试这样的事情： -

 .area { 
 width: 300px; 
 height: 300px; 
background: url(../images/abe-bg.png) no-repeat; 
position: relative;
}

 .bubble { 
 position: absolute; 
 left: 93px; 
 top: 21px; 
  width: 135px; 
height: 84px; 
 display: table; 
}

.bubble p {
display: table-cell; 
vertical-align: middle; 
 text-align: center; 
}

看看这个：- http://www.vanseodesign.com/css/vertical-centering/