CSS div區塊水平置中、垂直置中

CSS div區塊水平置中、垂直置中

 

CSS區塊的水平置中、垂直置中，一直是很讓人容易火大的東西...

所以下面要分享的是，如何讓CSS區塊水平置中、垂直置中的方法和技巧

  

 

 

 

使用詳解說明：

    small 這個區塊放在 container 區塊裡面的時候會佔用了 container 區塊的位置，因此

    當水平置中的時候：

        使用mrgin:auto瀏覽器自動會將左右間距取好

    當垂直置中的時候：

        small 這個區塊的垂直置中後，必須距離 container 區塊的高度是 ( container高 - small高 ) / 2 = top的高

        所以在這個案例裡面用了top:150px;

        但是在這個例子裡面，因為你必須是放在 container 區塊裡面，所以定位的方式必須使用 relative 而不是 absolute

    

    注意：不管是水平置中或是垂直置中，都必須宣告寬度與高度，這樣子做出來的定位才會準確

 

    以上就是水平置中與垂直置中最簡單的方法

 

 

    如果覺得對你有幫助的話，麻煩幫小弟按個讚哦～