如何垂直对齐具有定义的宽度/高度的div内容的中心？

Question

这将是垂直居中在限定的宽度/高度的任何内容的正确方法div。

在示例中，有两个具有不同高度的内容，什么是使用class垂直居中的最佳方法是什么.content？（并且适用于所有浏览器，而没有的解决方案table-cell）

想到了一些解决方案，但想知道其他想法，一个正在使用position:absolute; top:0; bottom: 0;和margin auto。

Answer 1

我对此进行了一些研究，从中发现您有四个选择：版本1：显示为表格单元的父div如果您不介意display:table-cell在父div上使用，则可以使用以下选项：.area{    height: 100px;    width: 100px;    background: red;    margin:10px;    text-align: center;    display:table-cell;    vertical-align:middle;}版本2：具有显示块和内容显示表单元的父div.area{    height: 100px;    width: 100px;    background: red;    margin:10px;    text-align: center;    display:block;}.content {    height: 100px;    width: 100px;    display:table-cell;    vertical-align:middle;    }版本3：父div浮动和内容div作为显示表格单元.area{    background: red;    margin:10px;    text-align: center;    display:block;    float: left;}.content {    display:table-cell;    vertical-align:middle;    height: 100px;    width: 100px;}版本4：父div位置与内容位置的相对位置我使用此版本的唯一问题是，似乎必须为每个特定的实现创建css。原因是内容div需要具有您要填充的文本的设置高度，然后才能确定页边距。该问题可以在演示中看到。您可以通过更改内容div的高度百分比并将其乘以-.5来获得最高边距值，以使其手动适用于每种情况。.area{    position:relative;     display:block;    height:100px;    width:100px;    border:1px solid black;    background:red;    margin:10px;}.content {     position:absolute;    top:50%;     height:50%;     width:100px;    margin-top:-25%;    text-align:center;}

Answer 2

这也可以display: flex仅使用几行代码来完成。这是一个例子：.container {  width: 100px;  height: 100px;  display: flex;  align-items: center;}

Answer 3

我在本文中找到了这种解决方案.parent-element {  -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d;  transform-style: preserve-3d;}.element {  position: relative;  top: 50%;  transform: translateY(-50%);}如果元素的高度不固定，则它就像一个吊饰。