在设置了自动高度和最小高度的父项中垂直对齐 div？

Question

我卡在这个了。

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

我该怎么做？

Answer 1

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

The flex-direction property establishes the main axis.

The justify-content property defines how flex items are laid out along the main axis on the current line.

The align-items property defines the default for how flex items are laid out along the cross axis on the current line.

The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.

来源：Using CSS flexible boxes

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

/!\警告:

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

Answer 2

另一个解决方案需要 Javascript。

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

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

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

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

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

myElt.style.verticalAlign = 'middle';

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

郑重声明，我没有测试这个解决方案。它可能需要一些调整...

Answer 3

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

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

.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>

Answer 4

使用 table 显示，如下所示：

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>

在设置了自动高度和最小高度的父项中垂直对齐 div？

Vertically align a div in a parent which has height auto AND min-height set?

css

center

vertical-alignment