CSS垂直居中

Question

我知道有很多方法可以让 CSS 居中。水平居中任何东西都非常简单。但是，如果您要将任何东西垂​​直居中，那将是一个全新的故事。 我只是想知道为什么我们不能只说 bottom-align: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）：

内联替换元素，普通块级替换元素 flow, 'inline-block' 替换了正常流和浮动中的元素 替换元素

如果'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

我实现您想要的技术的最佳方法是使用 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 fiddle 供参考。我设置了一个固定高度来显示实际的垂直对齐，但实际上，它也适用于百分比高度或填充的计算高度。 http://jsfiddle.net/JTVeG/

Answer 3

修改后的作者代码 不管它的大小，我都将在 parentbox 的中间！

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

Answer 4

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 5

您可以轻松找到旧的技术来执行此操作，但这里讨论了一种较新的技术：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

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

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