CSS盒子居中的經常使用的幾種方法

第一種:css

用css的position屬性

    <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative;
        } .div2 { width: 40px; height: 40px; background-color: red; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0;
        }
    </style>

    <div class="div1">
        <div class="div2 ">
        </div>
    </div>

效果圖:css3

第二種:佈局

利用css3的新增屬性table-cell, vertical-align:middle;

    <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: table-cell; vertical-align: middle;
        } .div2 { width: 40px; height: 40px; background-color: red; margin: auto;
        }

    </style>

    <div class="div1">
        <div class="div2">
        </div>
    </div>

效果:flex

第三種:flexbox

利用flexbox佈局

<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: flex;
        /*!*flex-direction: column;*!可寫可不寫*/ justify-content: center; align-items: center;
    } .div2 { height: 40px; width: 40px; background-color: red;
    }
</style>
<div class="div1 ">
    <div class="div2 ">
    </div>
</div>

效果:spa

第四種:code

利用transform的屬性(缺點:須要支持Html5)

<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative;
    } .div2 { height: 40px; width: 40px; background-color: red; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    }
</style>
<div class="div1 ">
    <div class="div2 ">
    </div>
</div>

效果圖:orm

相關文章
相關標籤/搜索