css3(6):div屏幕居中方法(传统js方式和css3方式)

26 Aug 2014

div屏幕居中，主要考虑的是垂直居中，传统的方式可以用js来实现，而css3提供了更为方便的方法

                    //传统的js方法，稍微用了点数学技巧，我用jquery写的
                    //text就是要居中的div，这个relative是相对body的
                    $(document).ready(function() {
                       
                        var textHeight = $(".text").height();
                        $(".text").css({
                            position: "relative",
                            top: "50%", 
                            marginTop: "-"+(textHeight/2)+"px"
                        });

                    });
                

                    //css3方式更简单
                    //注意是在body中设置的样式
                    html,body{
                        width: 100%;
                        height: 100%;
                    }
                    body{
                        display: -moz-box;
                        display: -webkit-box;
                        -moz-box-align:center;
                        -webkit-box-align:center;
                        -moz-box-pack:center;
                        -webkit-box-pack:center;
                    }
                    .text{
                        height: 400px;
                        width: 400px;
                        border: solid 1px black;
                        margin: 0 auto;  
                    }