您现在的位置是：网站首页> 编程资料编程资料

使用CSS居中浮动元素的方法css使用flexbox布局容器内多元素水平居中CSS元素居中布局的简单方法CSS实现定位元素居中的方法CSS行内元素和块级元素的居中实例分析DIV+CSS垂直居中一个浮动元素CSS绝对定位元素left设为50%实现水平居中css3设置box-pack和box-align让div里面的元素垂直居中浅谈css元素居中

2021-09-05 810人已围观

简介 这篇文章主要介绍了使用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.   
  2.     Demo   
  3.     "utf-8"/>   
  4.     "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.        
  16.     "p">   
  17.         "c">Test Float Element Center   
  18.     
  
  •   
  •   

    • 上一篇：将页脚固定在页面底部的CSS实战

    下一篇：CSS编写规范的相关建议使用CSS居中浮动元素的方法CSS3的Flexible Boxes详细使用教程将页脚固定在页面底部的CSS实战

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网