Question

我知道有许多方法可以将CSS集中在一起。任何水平居中都是非常直接的。但是，如果你要垂直居中，这是一个全新的故事。我只是想知道为什么我们不能只说底部对齐：auto;顶部对齐：自动;正如我们想要水平居中的那样？为什么像水平居中的东西看起来那么简单的东西看起来如此简单就是那么简单？我知道有很多方法，但是我们只是说你有一个未知大小的元素，你想要在另一个未知大小的元素中居中。

我一直坐在这里两天没有找到关于这个答案的好问题，我们有很多不同的方法来水平居中项目，但为什么没有一个单一的CSS标准提出了一种垂直居中的方法？这样做是件坏事吗？是否会让人哭泣或随意劳动？它是否会熔化核反应堆？

我们生活在2014年。似乎没有必要使用Javascript来做一些简单的事情来集中在另一个元素内。

编辑：代码示例我的意思是： http://jsfiddle.net/VsakD/

CSS：

div.parentbox
{
    width:500px;
    height:500px;
    border-style:solid;
}

div.childbox
{
    width:300px;
    height:300px;   
    border-style:solid;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
}

HTML：

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

Answer 1

有人可以请注意为什么我不能简单地说margin-top:auto; margin-bottom:auto;进行垂直对齐，这可以合理地假设，因为你margin-left:auto; margin:right:auto;水平对齐了吗？

根据 Spec （ 10.6.2 ）：

内联替换元素，正常的块级替换元素   流，“内联块”在正常流动和浮动中替换元素   替换元素

如果'margin-top'或'margin-bottom'为'auto'，则其使用值为 0 。

这就是为什么在这种情况下使用顶部/底部margin，不会进行更改。

顺便说一句，为了在容器内垂直对齐div元素（未知尺寸），您可以关注this approach：

.parentbox {        
    text-align: center; /* Align inline elements center horizontally */
    font: 0/0 a; /* <-- remove the gap between inline(-block) elements */
}

.parentbox:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.childbox {
    display: inline-block;
    vertical-align: middle;
    font: 1rem/1 Arial, sans-serif;  /* <-- Reset the font */
}

<强> WORKING DEMO

Answer 2

您可以轻松找到较旧的技术，但这里讨论的是更新的技术：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

适用于IE9 +和所有其他浏览器。使用它的好处是不必知道元素的高度或使用绝对定位。多行文本不受行高法的影响。

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

Answer 3

display: table方法是一种方法，但也可以利用CSS转换。与许多其他CSS属性（如“top”）不同，其中百分比是相对于包含元素计算的，CSS转换将百分比应用于元素本身。因此，您可以将元素放置在其容器内50％的位置，然后将其转换为其自身大小的50％：

.center-me {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: auto; margin-right: auto;
  width: 300px; /* or whatever */
}

<div class=center-me> Hello World! </div>

Thanks go to the great Dave Walsh. Here is a jsfiddle to demonstrate.

Answer 4

我实现所需技术的最佳方式是使用table display规则。

<div class="parent-container'>
   <div class="child-container">
         This is vertically centered text!
   </div>
</div>

诀窍在于CSS

    .parent-container {
        display: table;
        width: 100%;
        height: 300px;
        background-color: #ff0000;
    }

    .child-container {
        display: table-cell;
        vertical-align: middle;
    }

通过将父容器显示为table，并将子显示为cell，它遵循与table相同的垂直对齐规则，因为这就是你所要的告诉它认识自己。

这是我的JS小提琴，供参考。我设置了一个固定的高度来显示垂直对齐，但实际上，它也可以使用百分比高度或填充计算的高度。 http://jsfiddle.net/JTVeG/

Answer 5

修改后的作者代码无论大小如何，我都会在父箱的中间！

div.parentbox
{
    width:500px;
    height:500px;
    border-style:solid;
    display: table; //added this line
}

div.childbox
{
    width:300px;
    height:300px;   
    border-style:solid;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
    display: table-cell; //added this line
    vertical-align: middle;
    text-align: center;
}

带CSS的垂直中心

5 个答案: