Question

我坚持这个。

我想垂直居中一个div。它的父母身高不明，但确实有一个最小身高。

我该怎么做？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

flex-direction属性建立主轴。

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

align-items属性定义了如何沿当前行的横轴布置弹性项目的默认值。

align-self属性定义了单个弹性项在横轴上的对齐方式，并覆盖了align-items建立的默认值。

来源：Using CSS flexible boxes

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

/！\警告：

flexbox属性非常有吸引力（我之前对它们非常感兴趣）但是只要你在DOM中使用absolute位置，它们就会变得非常不稳定。
flexbox属性需要一些供应商前缀，几乎所有浏览器都不是那么老的版本。有时，属性甚至没有相同的名称（有旧， tweener 和新语法。请参阅本文末尾： A Complete Guide to Flexbox）

Answer 3

其他解决方案需要使用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';

当然，每次调整父元素的大小时都需要重新进行数学运算（例如，调整窗口大小）...

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

Answer 4

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

4 个答案: