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

 

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

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

  

<style>

    /* 建立一個有顏色的容器,把要置中的區塊包起來 */

    #container{

        width:500;

        height:500;

        background-color:green;

    }

    /* 這邊建立的是要被置中的區塊 */

    #small{

        width:200;

        height:200;

        background-color:blue;

        /* 垂直置中 */

        top:150px;

        /* 搭配垂直置中使用 */

        position:relative;

        /* 水平置中 */

        margin: auto;

    }

</style>

 

<div id="container">

    <div id="small">

    </div>

</div>

 

 

使用詳解說明:

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

    當水平置中的時候:

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

    當垂直置中的時候:

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

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

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

    

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

 

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

 

 

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

 

 

arrow
arrow

    newaurora 發表在 痞客邦 留言(0) 人氣()