在定义的宽度/高度div 中垂直居中任何内容的正确方法是什么。
在example 中有两个高度不同的内容，使用.content 类垂直居中的最佳方法是什么。 （它适用于所有浏览器，没有table-cell 的解决方案）
有一些解决方案，但想知道其他想法，一个是使用position:absolute; top:0; bottom: 0; 和margin auto。
【问题讨论】：
display: flex; align-items: center;。如果您不也希望它水平居中，请添加flex-direction: column;。
标签： html css vertical-alignment
我对此进行了一些研究，发现您有四个选择：
如果您不介意在父 div 上使用 display:table-cell，可以使用以下选项：
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
.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;
}
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
我在这个版本中遇到的唯一问题是，您似乎必须为每个特定的实现创建 css。这样做的原因是内容 div 需要具有您的文本将填充的设置高度，并且margin-top 将被计算出来。这个问题可以在演示中看到。您可以通过更改内容 div 的高度 % 并将其乘以 -.5 来获得您的 margin-top 值，手动使其适用于每个场景。
.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;
}
【讨论】：
area 包含在什么内容中，或者 content 内容是什么重要吗？
边距：all_four_margin
通过为 all_four_margin 提供 50% 将元素放置在中心
style="margin: 50%"
你也可以申请关注
边距：右上左下
边距：右上&左下
边距：上&下右&左
通过给出适当的百分比，我们可以在任何我们想要的地方获得元素。
【讨论】：
margin 的可能值。
我在article找到了这个解决方案
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
如果元素的高度不固定，它就像一个魅力。
【讨论】：
position: relative 一起使用。不知道可以追溯到多远。
这也可以使用display: flex 完成，只需几行代码。这是一个例子：
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
【讨论】：
flex-direction: column
将 div 的内容垂直居中的简单技巧是将行高设置为与高度相同：
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
但这仅适用于一行文本！
最好的方法是使用 div 作为容器，并在其中包含值的 span：
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
【讨论】：
我会说添加一个带有句点的段落 并像这样设置样式：
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
你可能需要玩弄百分比才能让它正确
【讨论】：
responsive，因为它会被硬编码。也许calc() 可以在这里提供帮助，但是说anyPercentage% 根本不是解决方案。