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中的絕對定位是相對於最近已定位的祖先元素進行定位，如果元素沒有已經定位的祖先元素，那麼位置相對於初始的包含塊進行定位。

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

CSS詳解
數字和字母將容器撐大問題解決
自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,挺讓人頭疼,下面介
電腦技術：CSS中的背景部分編程學習教程
　
CSS BUG順口溜，快速牢記CSS的Bug處理方法
CSS存在Bug，但怎麼能讓我們記住這些Bug，以便在以後編寫CSS代碼的時候能很好的應對，這不，

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS實現類似條狀統計表效果的方法 DIV+CSS兼容IE6、IE7、Firefox方法探究(1) 不會也不懂程序，能學會DIV+CSS技術嗎？ css中的content: . 有什麼用？為什麼要用他？ 熱點透視 DIV CSS完美兼容IE6 IE7 FF的通用方法 在網頁中插入CSS樣式表的幾種方式 另一個角度談談DIV+CSS 詳解css中的display屬性 一個不錯的跑著改變字體顏色的特效，流光益彩文字 CSS樣式表設計的十條技巧
熱門推薦
DIV+CSS網頁及導航布局教程實例 CSS如何排查錯誤？從哪入手 小技巧: 利用CSS同比例縮小圖片 彩色點跟蹤鼠標效果 關於前端開發div+css+javascript 管理思考，集多角色於 探究IE和Firefox在JavaScript方面的兼容性(2) css 規則中兩個類連在一起是什麼意思？ 網頁制作學習之CSS樣式表的優先權 一款純css實現的漂亮導航菜單(也適用於個人中心)
大家都在看
jquery做的一個簡單的屏幕鎖定提示框 express的中間件cookieParser詳解 快速解決Canvas.toDataURL 圖片跨域的問題 jQuery UI 實現email輸入提示實例 網頁中表單按回車就自動提交的問題的解決方案 js之Function原型 JS實現的數組全排列輸出算法 XHTML入門學習教程:表單標簽
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved