版本1：父div，显示为table-cell

如果您不介意在父div上使用display:table-cell，可以使用以下选项：

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

Live DEMO

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

Live DEMO

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

Live DEMO

版本4：父级div位置相对于内容位置绝对值

我对这个版本唯一的问题是，你似乎必须为每个特定的实现创建css。这样做的原因是内容div需要具有文本将填充的设置高度，并且边缘顶部将被计算出来。这个问题可以在演示中看到。您可以通过更改内容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;
}

Live DEMO

Answer 2

我在此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%);
}

如果元素的高度不固定，它就像一个魅力。

Answer 3

这也可以使用只有几行代码的$.ajaxPrefilter(function( options, original_Options, jqXHR ) { options.async = true; });来完成。这是一个例子：

display: flex

Live Demo

Answer 4

使div内容垂直居中的简单技巧是将行高设置为与高度相同：

<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}

但这仅适用于一行文本！

最好的方法是将div作为容器，并在其中包含值的范围：

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

Answer 5

我会说添加一个带有句点的段落并像这样设置样式：

<p class="center">.</p>

<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>

您可能需要玩弄百分比以使其正确

Answer 6

保证金：all_four_margin

通过向all_four_margin提供50％将元素置于中心

style="margin: 50%"

您也可以将其应用于以下

保证金：右上角左下方

保证金：右上角和左下角

保证金：顶部和右下角和左侧

通过给出适当的％，我们可以在任何地方获得元素。

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

6 个答案:

版本1：父div，显示为table-cell

版本2：具有显示块和内容显示表格单元格

版本3：父div和内容div作为显示表单元格

版本4：父级div位置相对于内容位置绝对值