Zi 字媒體

CSS div區塊水平置中、垂直置中   CSS區塊的水平置中、垂直置中，一直是很讓人容易火大的東西... 所以下面要分享的是，如何讓CSS區塊水平置中、垂直置中的方法和技巧        /* 建立一個有顏色的容器，把要置中的區塊包起來 */     #container{         width:500;         height:500;         background-color:green;     }     /* 這邊建立的是要被置中的區塊 */     #small{         width:200;         height:200;         background-color:blue;         /* 垂直置中 */         top:150px;         /* 搭配垂直置中使用 */         position:relative;         /* 水平置中 */         margin: auto;     }               使用詳解說明：     small 這個區塊放在 container 區塊裡面的時候會佔用了 container 區塊的位置，因此     當水平置中的時候：         使用mrgin:auto瀏覽器自動會將左右間距取好     當垂直置中的時候：         small 這個區塊的垂直置中後，必須距離 container 區塊的高度是 ( container高 - small高 ) / 2 = top的高         所以在這個案例裡面用了top:150px;         但是在這個例子裡面，因為你必須是放在 container 區塊裡面，所以定位的方式必須使用 relative 而不是 absolute          注意：不管是水平置中或是垂直置中，都必須宣告寬度與高度，這樣子做出來的定位才會準確       以上就是水平置中與垂直置中最簡單的方法         如果覺得對你有幫助的話，麻煩幫小弟按個讚哦～