垂直对齐具有高度自动和最小高度设置的父级中的div？

Posted 2023-03-05

【中文标题】垂直对齐具有高度自动和最小高度设置的父级中的div？

【英文标题】：Vertically align a div in a parent which has height auto AND min-height set?

【发布时间】：2015-05-07 13:35:49

【问题描述】：

我被这个卡住了。

我想垂直居中一个 div。它的父级有一个未知的高度，但是，它确实有一个最小高度。

我该怎么做？

【问题讨论】：

要对齐的div，是否有指定的尺寸？父容器中还有哪些其他元素？

为了清晰起见重新措辞，更好的标题。

请出示您的代码

【参考方案1】：

我不推荐这种用法，但是您可以在父元素上使用display:flex，并根据您的需要在子项上使用以下之一：

flex-direction 属性建立主轴。

justify-content 属性定义了弹性项目如何沿当前行的主轴布局。

align-items 属性定义了 flex 项目在当前行沿横轴的默认布局。

align-self 属性定义单个 flex 项如何在交叉轴上对齐，并覆盖由 align-items 建立的默认值。

来源：Using CSS flexible boxes

本指南有助于理解机制：A Complete Guide to Flexbox

---

/!\警告：

flexbox 属性确实很吸引人（我以前对它们很感兴趣）但是一旦你在 DOM 中使用一些absolute 定位，它们就会变得非常不稳定。 flexbox 属性需要一些供应商前缀，用于几乎所有浏览器的旧版本。有时属性甚至没有相同的名称（有 old、tweener 和 new 语法。请参阅这篇文章的结尾： A Complete Guide to Flexbox)

【参考方案2】：

使用表格显示，如下所示：

div 
  height: 80vh;
  /* Random height and width */
  width: 80%;
  border: 5px solid blue;
  display: table;

p 
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;

<div>
  <p>
    Some centered content.
  </p>
</div>

【讨论】：

感谢您的回复。我不想指定一个固定的高度，所以这个解决方案不起作用。

【参考方案3】：

这是使用 CSS3 转换属性的一种方法。

使用绝对定位将子元素的上边缘放置在距顶部 50% 处，然后使用transform: translateY(-50%) 调整子元素的高度。

.parent 
    height: auto;
    min-height: 200px;
    border: 1px dotted gray;
    position: relative;

.child 
    border: 1px dotted blue;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

.content 
    margin-left: 100px;
    margin-right: 400px;

<div class="parent">
    <div class="child">child</div>
    <div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.
    </div>
</div>

【讨论】：

不错的举动，我喜欢它......太糟糕了，它需要孩子'绝对'定位。但我认为它可以在大多数情况下完成这项工作......

谢谢！完美运行。

绝对位置破坏了默认的水平对齐方式，现在您必须将其设置为某些内容并且它与其他元素重叠。

绝对位置的需要消除了该解决方案的流动性，遗憾的是 table/table css 仍然是跨浏览器的方式

【参考方案4】：

另一种解决方案需要 javascript。

Javascript 可以帮助你获取父元素的真实高度：

var myElt = <your parent selector>;
var myEltHeight = myElt.offsetHeight;

之后，可以将父级的'line-height'属性设置为等于这个高度，

myElt.style.lineHeight = myEltHeight + 'px';

最后给他添加一个 'vertical-align: middle'。

myElt.style.verticalAlign = 'middle';

当然，每次调整父元素的大小（例如调整窗口大小）时，您都必须重新计算...

为了记录，我没有测试这个解决方案。它可能需要一些调整...