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

在定义的宽度/高度 div中垂直居中任何内容的正确方法是什么。

在 例子中有两个不同高度的内容，使用类 .content垂直居中的最佳方法是什么。(它适用于所有浏览器，不需要 table-cell的解决方案)

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

329994 次浏览
小开
最佳答案

我对此做了一些研究，发现你有四种选择:

版本1: 父 div，显示为表单元格

If you do not mind using the display:table-cell on your parent div, you can use of the following options:

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

现场演示

小开

全部 _ 四 _ 边距

通过提供50% 的全部 _ four _ 裕将把元素放在中心

style="margin: 50%"

你也可以申请跟进

左上右下

边距: 右上和左下

边距: 上下左右

通过给出适当的% ，我们可以在任何我们想要的地方得到元素。

小开

我在这个 文章里找到了这个溶液

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


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

如果元素的高度不固定，它就像魔法一样起作用。

小开

这也可以通过使用只有几行代码的 display: flex来完成:

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

现场演示

小开

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

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

你可能需要玩弄一下百分比，以得到正确的结果


提交答案