css+div上下居中原理及代碼

　　通常我們用到的css布局都是左右居中，經(jīng)典css寫(xiě)法如下：

　　view plaincopy to clipboardprint?

　　body{

　　 margin:0;

　　 padding:0;

　　 width:100%;

　　 height:100%;

　　}

　　div{

　　 margin:0 auto;

　　 width:500px;

　　 heigth:auto;

　　}

　　上面是經(jīng)典的左右居中的css寫(xiě)法，那么像登錄框那些比較小得div塊只是左右居中是否不是太美觀，如果上下左右都居中這是

　　大多數(shù)網(wǎng)站的做法，下面是一個(gè)比較經(jīng)典的div上下左右居中的css寫(xiě)法：

　　body{

　　 margin:0;

　　 padding:0;

　　 width:100%;

　　 height:100%;

　　}

　　div{

　　 position:absolute;

　　 top:50%;

　　 left:50%;

　　 margin-top:-250px;

　　 margin-left:-250px;

　　 /*此時(shí)寬和高都要固定*/

　　 width:500px;

　　 heigth:500px;

　　}

　　上面的margin可以合并：margin:-250px 0 0 -250px;

　　大概原理就是：布局需用position，絕對(duì)布局absolute還是相對(duì)布局relative得看父容器，top，left相對(duì)于頂部和左部都相距整個(gè)容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px

　　向左回退div寬的50%即：margin-left:-250px

　　好了大功告成。