使用CSS實現div的水平和垂直置中

來源:互聯網
上載者:User
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>水平垂直置中div示範效果</title> <style type="text/css">  .align-center{     /*負邊距+定位:水平垂直置中(Negative Margin)     使用絕對位置將content的定點定位到body的中心,然後使用負margin(content寬高的一半),將content的中心拉回到body的中心,已到達水平垂直置中的效果。    */    position:absolute;    left:50%;    top:50%;    width:400px;    height:400px;    margin-top:-200px;    margin-left:-200px;        border:1px dashed #333;} </style> </head> <body> <div class="align-center">水平垂直置中div示範效果</div> </body> </html>   

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.