jQuery 如何在没有显示的情况下垂直对齐另一个 div 内的 div：table-cell
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7446077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align div inside another div without display:table-cell
提问by MonsterMMORPG
Ok this is the div structure.
好的，这是 div 结构。
<div class="DivParent">
<a href="#">
<div class="DivWhichNeedToBeVerticallyAligned"></div>
</a>
</div>
DivParent has fixed width and height values but DivWhichNeedToBeVerticallyAligned does not have fixed height values.
DivParent 具有固定的宽度和高度值，但 DivWhichNeedToBeVerticallyAligned 没有固定的高度值。
If you make DivParent display:table-cell; you can vertically align DivWhichNeedToBeVerticallyAligned but i don't want to use that feature since it causes some mess.
如果你让 DivParent display:table-cell; 您可以垂直对齐 DivWhichNeedToBeVerticallyAligned 但我不想使用该功能，因为它会导致一些混乱。
A href tag link should be same size with the divParent i mean whole divparent has to be clickable. like display:block.
href 标签链接应该与 divParent 大小相同，我的意思是整个 divparent 必须是可点击的。像显示：块。
So are there any CSS way of vertically aligning or lightweight jquery solution would also help.
那么是否有任何垂直对齐的 CSS 方式或轻量级 jquery 解决方案也会有所帮助。
Thank you.
谢谢你。
Here jsfiddle: http://jsfiddle.net/XHK2Z/
这里jsfiddle：http: //jsfiddle.net/XHK2Z/
*
*
回答by kizu
You can use an extra helper to achieve vertical alignment in a block with fixed height.
您可以使用额外的助手在具有固定高度的块中实现垂直对齐。
Look at this: http://jsfiddle.net/kizu/7Fewx/
看看这个：http: //jsfiddle.net/kizu/7Fewx/
There you must have a helper near a block you want to align with:
在那里，您必须在要与之对齐的街区附近有一个助手：
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
And add display: inline-block; vertical-align: middle;to .DivWhichNeedToBeVerticallyAligned
并添加display: inline-block; vertical-align: middle;到.DivWhichNeedToBeVerticallyAligned
回答by timrwood
There is no way to do this with CSS without knowing the height of the child div.
如果不知道子 div 的高度，就无法使用 CSS 做到这一点。
With jQuery, you could do something like this.
使用 jQuery，你可以做这样的事情。
var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);
回答by Mohsen
if the parent don't have any other child. this would be a css only "hack"
如果父母没有其他孩子。这将是一个 css 唯一的“hack”
DivParent{line-height:100px /*the div actual height*/ }
.DivWhichNeedToBeVerticallyAligned{display:inline-block}
another hack is
另一个黑客是
DivParent{height:100px; position:relative}
.DivWhichNeedToBeVerticallyAligned{height:20px; position:absolute; top:50%; margin-top:-10px;}
回答by hemkaran_raghav
This solution works for me fine in modern browsers including IE 10 and above.
这个解决方案在包括 IE 10 及更高版本的现代浏览器中对我来说很好。
<div class="parent">
<div class="child">Content here</div>
</div>
inlucluding this css
包括这个css
.parent {
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width : 525px;
}
回答by Arsh
I have been using the following solution (with no positioning, no table-cell/table-row and no line height) since over a year, it works with IE 7 and 8 as well.
一年多以来，我一直在使用以下解决方案（没有定位，没有表格单元格/表格行和行高），它也适用于 IE 7 和 8。
<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>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
回答by Tom Sarduy
Here is another option for modern browsers:
这是现代浏览器的另一种选择：
.child {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
