110

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

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

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

4

6 回答 6

140

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

版本 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 需要具有您的文本将填充的设置高度，并且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;
}​

现场演示

于 2012-06-10T12:40:34.647 回答
83

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

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

现场演示

于 2017-12-28T13:41:10.653 回答
34

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

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

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

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

于 2016-06-26T21:40:24.620 回答
0

将 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>
于 2020-10-12T20:51:28.157 回答
-2

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

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

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

您可能需要玩弄百分比才能正确

于 2021-01-18T12:07:53.740 回答
-8

边距：all_four_margin

通过为 all_four_margin 提供 50% 将元素放置在中心

style="margin: 50%"

您也可以将其应用于以下

边距：右上左下

边距：右上和左下

边距：上&下右&左

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

于 2014-05-29T18:34:23.087 回答