1. 程式人生 > >絕對定位後,position:absolute;不能使用margin: 0 auto;實現居中;

絕對定位後,position:absolute;不能使用margin: 0 auto;實現居中;

com height test 指點 meta color img absolut ext

聲明: web小白的筆記,歡迎大神指點!聯系QQ:1522025433.

我們都知道margin: 0 auto;可也實現塊狀元素的水平居中;但是對於絕對頂為的元素就會失效;

請看實例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>絕對定位後margin: 0 auto;居中失效的解決方法</title>
<style type="text/css">
    .test-out {

        width: 500px;
        height
: 500px; margin: 0 auto; /*實現父元素居中*/ background: red; } .test-in { width: 200px; height: 200px; margin: 0 auto; /*實現子元素居中*/ background: blue; } </style> </head> <body> <div class="test-out"> <div class="test-in"></
div> </div> </body> </html>

瀏覽器效果圖:

技術分享

我們可以看出在正常情況下: margin: 0 auto; 實現居中真是棒棒的!

我們把css樣式修改為:

<style type="text/css">
    .test-out {
        position: relative; /*作為子元素的 定位包含框,使子元素在父元素內 進行定位*/
        width: 500px;
        height: 500px;
        margin: 0 auto; /*實現父元素居中*/
        background
: red; } .test-in { position: absolute; /*子元素實現絕對定位*/ width: 200px; height: 200px; margin: 0 auto;/* 此時會失效*/ background: blue; }

瀏覽器效果:

技術分享

子元素(藍色盒子)的居中效果已失效!

絕對定位以後margin: 0 auto;實現居中失效的解決方法:

為了使子元素(藍色盒子)在絕對定位下實現居中,我們可以利用定位和margin-left取相應的負值,實現居中;

具體代碼如下:

<style type="text/css">
    .test-out {
        position: relative; /*作為子元素的 定位包含框,使子元素在父元素內 進行定位*/
        width: 500px;
        height: 500px;
        margin: 0 auto; /*實現父元素居中*/
        background: red;
    }
    .test-in {
        position: absolute;  /*子元素實現絕對定位*/
        top: 0;
        left: 50%; /*先定位到父元素(紅盒)的中線,然後使子元素(紅盒)的外邊界 左偏移, 半個子元素(紅盒) 的寬度,即可*/
        margin-left: -100px;/*向左 偏移元素的總寬度的一半*/
        width: 200px;
        height: 200px;
        background: blue;
    }        
</style>

瀏覽器效果圖:

技術分享

是不是達到我們想要的結果了(認真看代碼中的註釋)。

絕對定位後,position:absolute;不能使用margin: 0 auto;實現居中;