当前位置:Gxlcms > css > 使用CSS居中浮动元素的方法介绍

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

时间:2021-07-01 10:21:17 帮助过:47人阅读

这篇文章主要介绍了使用CSS居中浮动元素的方法介绍,是CSS入门学习中的基础知识,需要的朋友可以参考下

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

  1. p{
  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%也就可以了。

  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. <p class="p">
  17. <h1 class="c">Test Float Element Center</h1>
  18. </p>
  19. </body>
  20. </html>

以上就是使用CSS居中浮动元素的方法介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行