DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS定位“十字架”之水平垂直居中
CSS定位“十字架”之水平垂直居中
編輯:CSS詳解     
這篇文章主要介紹了CSS定位“十字架”之水平垂直居中的相關資料,CSS如何定位“十字架”實現水平垂直居中效果,小編為大家解答,感興趣的小伙伴們可以參考一下

本文為大家分享了CSS定位“十字架“之水平垂直居中效果的實現方法,具體內容如下

1.先看要實現的效果

實際的效果圖

可以看到我的實現過程是先使用一個父級的div來定位水平垂直居中,然後再父級的div中定位出兩個十字架的div。

看實現代碼:

XML/Html Code復制內容到剪貼板
  1. <Html>
  2. <head>
  3. <title></title>
  4. <style>
  5. body{margin:0;padding:0}
  6. /*定位父級div水平垂直居中*/
  7. .body_main{
  8. width:200px;
  9. height: 300px;
  10. background-color: #3091E5;
  11. margin:-150px 0 0 -100px;
  12. top:50%;
  13. left:50%;
  14. position: absolute;
  15. }
  16. /*定位水平div垂直居中*/
  17. .row_div{
  18. width:200px;
  19. height: 50px;
  20. background-color:#88E500;
  21. position: absolute;
  22. top:50%;
  23. margin:-25px 0 0 0;
  24. }
  25. /*定位列div水平居中*/
  26. .clou_div{
  27. width:50px;
  28. height: 300px;
  29. background-color: #3c510c;
  30. left:50%;
  31. position: absolute;
  32. margin:0 0 0 -25px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="body_main">
  38. <div class="row_div">橫向的div</div>
  39. <div class="clou_div">豎直的div</div>
  40. </div>
  41. </body>
  42. </Html>

div默認的寬度是100%,當div絕對定位以後,其寬度是按照div中內容的寬度。

總結:

CSS中的絕對定位是相對於最近已定位的祖先元素進行定位,如果元素沒有已經定位的祖先元素,那麼位置相對於初始的包含塊進行定位。

以上就是本文的全部內容,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved