建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!
当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

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

整理编辑:建站学习网 更新时间:2017-01-08 阅读:0

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽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>  

转载请注明出处:https://www.dedexuexi.com/divcss/jc/2318.html

关键词:技巧