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

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

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

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

我对此进行了一些研究，从中发现您有四个选择：

版本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;
}​

现场演示

这也可以display: flex仅使用几行代码来完成。这是一个例子：

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

现场演示

我在本文中找到了这个解决方案

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

如果元素的高度不固定，则它就像一个吊饰。

保证金：all_four_margin

通过为all_four_margin提供50％，会将元素放置在中心

style="margin: 50%"

您也可以将其应用于关注

边距：右上方左下方

边距：右上和左下

边距：上下左右

通过给出适当的百分比，我们可以在任何需要的位置获得元素。