關於DIV垂直居中

關於絕對定位來讓DIV垂直居中:

1.較爲常見的一種方法:利用外補白即margin來實現居中;

        .class{

                   position:absolute;

                   left:50%;

                   top:50%;

                   width:200px;

                   height:200px;

                   margin-left:-100px;

                   margin-top:-100px;

        }

       此方法在於div具有固定的寬度和高度來實現水平垂直居中;

2.若沒有固定的高度或者寬度可以通過CSS3屬性來設置讓DIV水平垂直居中;

       .class{

                 position:absolute;

                 left:50%;

                 top:50%;

                 width:auto;

                 height:auto;

                 tranform:translate(50%,50%);

        }

      此方法在於其兼容性方面,對於IE9以前的版本存在兼容性問題;

3.對於固定寬高也可以通過設置四個方向的絕對定位值來實現水平垂直居中;

         .class{

                  position:absolute;

                  width:200px;

                 height:200px;

                 left:0;

                right:0;

                bottom:0;

                top:0;

               margin:auto;

          }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章