网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑：jimmy 日期: 2024/11/16 浏览：3 次 )

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽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>  
上一篇：CSS编写规范的相关建议
下一篇：CSS3的Flexible Boxes详细使用教程
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”：键盘需配有Copilot物理按键
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。