保證金自動在簡單的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中的描述一樣。

工作小提琴