如何在没有显示的情况下在另一个 div 中垂直对齐 div：table-cell

Posted 2023-03-05

【中文标题】如何在没有显示的情况下在另一个 div 中垂直对齐 div：table-cell

【英文标题】：How to vertically align div inside another div without display:table-cell

【发布时间】：2011-11-18 18:03:21

【问题描述】：

好的，这是 div 结构。

  <div class="DivParent"> 
  <a href="#">

  <div class="DivWhichNeedToBeVerticallyAligned"></div>

  </a>    
  </div>

DivParent 具有固定的宽度和高度值，但 DivWhichNeedToBeVerticallyAligned 没有固定的高度值。

如果你让 DivParent display:table-cell;您可以垂直对齐 DivWhichNeedToBeVerticallyAligned 但我不想使用该功能，因为它会导致一些混乱。

href 标记链接应该与 divParent 大小相同，我的意思是整个 divparent 必须是可点击的。比如显示：块。

那么是否有任何垂直对齐的 CSS 方式或轻量级 jquery 解决方案也会有所帮助。

谢谢。

这里是 jsfiddle：http://jsfiddle.net/XHK2Z/

*

【问题讨论】：

display:table-cell 有什么问题？

【参考方案1】：

这是现代浏览器的另一种选择：

.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%);

【参考方案2】：

一年多以来，我一直在使用以下解决方案（无定位、无表格单元格/表格行和无行高），它也适用于 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>

【参考方案3】：

此解决方案在包括 IE 10 及更高版本在内的现代浏览器中非常适合我。

<div class="parent">
    <div class="child">Content here</div>
</div>

包括这个 css

.parent 
  height: 700px;
  display: flex;
  justify-content: center;  
  align-items: center;

.child 
  width : 525px;

【参考方案4】：

您可以使用额外的助手来实现固定高度的块中的垂直对齐。

看看这个：http://jsfiddle.net/kizu/7Fewx/

您必须在要对齐的块附近有一个助手：

.DivHelper 
    display: inline-block;
    vertical-align: middle;
    height:100%;

并将display: inline-block; vertical-align: middle; 添加到.DivWhichNeedToBeVerticallyAligned

【讨论】：

谢谢，这工作得很好，但我更新了问题，你能再检查一下吗:)

这是因为您使用了额外的非inline-block 元素。使其工作的一种方法：将链接移动到包装器：jsfiddle.net/kizu/XHK2Z/1，另一种是将帮助器移动到a：jsfiddle.net/kizu/XHK2Z/2。无论如何，最好不要在a里面使用divs，在html5中是可以的，但你还是要谨慎，尽可能避免

哇，好用。在我使用 CSS 创建圆圈然后在其中填充文本的项目中，这让我死了好几个星期，其中每个页面的文本行数不同，而圆圈是恒定的。

为什么需要DivHelper？我发现没有它就无法对齐，只是不确定它在做什么；不错的提示！

我在另一个答案中解释了这个方法：***.com/a/7310398/885556

【参考方案5】：

如果父母没有其他孩子。这将是一个仅 css 的“hack”

DivParentline-height:100px /*the div actual height*/ 
.DivWhichNeedToBeVerticallyAligneddisplay:inline-block

另一个技巧是

DivParentheight:100px; position:relative
.DivWhichNeedToBeVerticallyAlignedheight:20px; position:absolute; top:50%; margin-top:-10px;

【讨论】：

感谢您的回答。两次破解都失败了。第二个垂直对齐，但是由于您定义了高度，它会破坏一切：D

垂直对齐很麻烦。最后你将需要 JS。就像脸书一样：facebook.com/notes/facebook-engineering/…

【参考方案6】：

在不知道子 div 高度的情况下，无法使用 CSS 执行此操作。

使用 jQuery，你可以做这样的事情。

var parentHeight = $('#parent').height();
var childHeight = $('#child').height();
$('#child').css('margin-top', (parentHeight - childHeight) / 2);

【讨论】：

我喜欢您的简单方法并将其包装在一个函数中。 gist.github.com/dylanvalade/7088132