保证金自动在简单的html / css代码中不起作用

Question

如此处所示-http: //jsfiddle.net/d4wUu/ ，我无法看到带有单词“ Testing”的带有红色边框的框沿包含它的黑框的高度居中。 它与黑框的顶部边框保持对齐，在其下方留有一些空间。

margin-top也不起作用。 知道如何获得margin: auto或margin-top （相对于包含它的黑盒）可以在此处的红色边框上工作吗？

Answer 1

小提琴

添加这些：

display: table-cell;
vertical-align: middle;

前往#heading 。

Answer 2

有几种方法可以使元素垂直居中。 据我所知， margin: auto不能在元素上垂直工作，除非您使用某种类型的表/表单元格样式。

这些对CSS的添加是垂直居中的一种方法：

#heading {  
    position:relative;
}
#heading-title {
    position:absolute;
    top: 50%;
    margin-top: -25px; /* this is half the height of the element */
}

这是更新的小提琴，显示了此工作原理 。

Answer 3

另一个解决方法

给margin: 7px auto #heading-title margin: 7px auto #heading-title margin: 7px auto 。

此处为7px因为父元素的高度为65px，子元素的高度为50px。 高度差为15px 。 因此，将15px分隔在margin-top和margin-bottom 。

仅当父元素和子元素的高度固定不变时才可以使用此技术，就像上面OP中的描述一样。

工作小提琴