技術標籤：csshtmlhtml5

我在整理css居中垂直時，發現了一個問題：

.container {
        width: 300px;
        height: 300px;
        background-color: cadetblue;
    }

    .center {
        width: 50px;
        height: 50px;
        background-color: bisque;
        margin-left: 125px;
        margin-top: 125px;
    }

我的目的是直接通過最簡單的margin，先讓他右移container的一半，再左移自己的一半，垂直居中也是。但是發現效果確實這樣

原因是： 普通文件流盒子間，只要垂直外邊距直接接觸就會發生合併，合併後外邊距視覺高度取兩個發生合併外邊距中較大者。發生這一現象的有三種情況：相鄰兄弟塊元素間、父元素及其首子元素和末子元素間（沒有內邊距或邊框把外邊距分隔開）、空塊級元素自身的合併。

解決方法：

		position:absolute;
		display:inline-block;
		float:left/right;
		overflow:hidden;(溢位的東西隱藏)