CSS水平垂直居中

水平居中

• 文本居中

       　　<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>