萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用CSS居中浮動元素的方法

使用CSS居中浮動元素的方法

方法一

設置容器的浮動方式為絕對定位
然後確定容器的寬高 比如寬500 高 300 的層
然後設置層的外邊距

CSS Code復制內容到剪貼板
  1. div{
  2. width:500px;
  3. height:300px;
  4. margin:-150px 0 0 -250px;
  5. position:absolute;
  6. left:50%;
  7. top:50%;
  8. background-color:#000;
  9. }

方法二

父元素和子元素同時左浮動,然後父元素相對左移動50%,再然後子元素相對右移動50%,或者子元素相對左移動-50%也就可以了。

CSS Code復制內容到剪貼板
  1. <!DOCTYPE html><html><head>
  2. <title>Demo</title>
  3. <meta charset="utf-8"/>
  4. <style type="text/css">
  5. .p{
  6. position:relative;
  7. left:50%;
  8. float:left;
  9. }
  10. .c{
  11. position:relative;
  12. float:left;
  13. rightright:50%;
  14. }
  15. </style></head><body>
  16. <div class="p">
  17. <h1 class="c">Test Float Element Center</h1>
  18. </div>
  19. </body>
  20. </html>  
copyright © 萬盛學電腦網 all rights reserved