CSS實現(xiàn)div垂直居中的方法有很多兼都，下面div居中的幾種方法是自己平時寫網(wǎng)頁中經(jīng)常用到的灸促，最常見的例子就是登錄注冊彈出框省容。
方法一：對div使用絕對布局position:absolute;并設(shè)置top翁垂，left绵跷，right，bottom的值相等磷蛹，但不一定都等于0吮旅；并且設(shè)置margin:auto。
方法二：這個方法要知道div的寬度和高度味咳。對div使用絕對布局position:absolute;并把top和left的值都設(shè)置為50%庇勃；50%就是指頁面窗口的寬度和高度的50%；最后將div左移和上移槽驶，左移和上移的大小為div寬度和高度的一半责嚷。
其中 margin-left：-100px 和 margin-top：-100px 可以寫成 margin：-100px ?0px ?0px ?-100px
方法三：div使用絕對定位position：absolute，并且設(shè)置left和top的值都為50%掂铐。使用css3的transform屬性罕拂。transform：translate（-50%揍异，-50%）。
以上3種方法的效果如下顯示
若有兩個div爆班，里面小的div相對于外面大的div水平垂直居中對齊衷掷，有以下幾種方法。
方法一：利用position和margin：auto實現(xiàn)柿菩。父元素設(shè)置position：relative戚嗅；子元素設(shè)置position：absolute，并設(shè)置top枢舶，left懦胞，right，bottom值相等凉泄。
方法二：使用position躏尉。父元素設(shè)置position：relative；子元素設(shè)置position：absolute后众。并設(shè)置top和left為50%胀糜，并設(shè)置左移和上移為子元素的大小的一半。
方法三：使用display：flex吼具。這種方法需要設(shè)置瀏覽器的兼容性僚纷。
方法四：使用transform：translate（）。父元素設(shè)置position：relative拗盒；子元素設(shè)置position：absolute怖竭。并設(shè)置top和left為50%。最后設(shè)置transform：translate（-50%陡蝇，-50%）痊臭。
以上四種方法的效果圖如下顯示
今天就跟大家分享這么多~如果你有更好的方法，請在下方留言
未經(jīng)作者本人同意登夫，請勿轉(zhuǎn)載广匙！
