CSS水平垂直居中

最新推荐文章于 2024-09-02 08:00:00 发布

dejing9744

最新推荐文章于 2024-09-02 08:00:00 发布

阅读量50

点赞数

原文链接：http://www.cnblogs.com/byronvis/p/4506770.html

版权

水平居中

文本居中

       　　<style>

　　　　　　　　div{
　　　　　　　　　　text-aligh:center
　　　　　　　　}

　　　　　　</style>

元素居中

　　　　　　1,margin法　　　　

　　　　　　<style>

　　　　　　　　div{
　　　　　　　　　　width:300px;
　　　　　　　　　　margin:0 auto;
　　　　　　　　}

　　　　　　</style>

　　　　　　2,position法　　　　　

　　　　　　<style>

　　　　　　　　div{
　　　　　　　　　　position:absolute;
　　　　　　　　　　width:300px;
　　　　　　　　　　left:50%;
　　　　　　　　　　margin-left:-150px;
　　　　　　　　}

　　　　　　</style>

垂直居中

文本居中

　　　　　　1,单行文本居中　

　　　　　　<style>

　　　　　　　　div{
　　　　　　　　　　height:30px;
　　　　　　　　　　line-height:30px;
　　　　　　　　}

　　　　　　</style>

　　　　　　2,多行文本居中　　　　

　　　　　　<style>

　　　　　　　　div{
　　　　　　　　　padding:30px 0;
　　　　　　　　}

　　　　　　</style>

元素居中

　　　　　　1,position法　　　　

　　　　　　<style>

　　　　　　　　div{
　　　　　　　　　　position:absolute;
　　　　　　　　　　top:50%;
　　　　　　　　　　height:300px;
　　　　　　　　　　margin-top:-150px;
　　　　　　　　}

　　　　　　</style>

　　　　　　　2,table法　　　

<style>

        div{
               display:table
        }

        div span{
            display:table-cell;
            vertical-align:middle;
        }

</style>