您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
CSS居中浮动元素的方法简介
作者：佚名 责任编辑：admin 更新时间：2022-06-22
欢迎大家在这里学习CSS居中浮动元素的方法!这里是我们给大家整理出来的精彩内容。我相信，这些问题也肯定是很多朋友在关心的，所以我就给大家谈谈这个!
方法一
设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距
CSS Code复制内容到剪贴板
div{
width:500px;
height:300px;
margin:-150px 0 0 -250px;
position:absolute;
left:50%;
top:50%;
background-color:#000;
}
方法二
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
CSS Code复制内容到剪贴板
<!DOCTYPE html><html><head>
<title>Demo</title>
<meta charset="utf-8"/>
<style type="text/css">
.p{
position:relative;
left:50%;
float:left;
}
.c{
position:relative;
float:left;
rightright:50%;
}
</style></head><body>
<div class="p">
<h1 class="c">Test Float Element Center</h1>
</div>
</body>
</html>
好了，CSS居中浮动元素的方法内容就给大家介绍到这里了。希望大家继续关注我们的网站!
相关推荐：
CSS中一些@规则的用法简介
- 上一个程序编程： CSS样式编写的技巧
- 下一个程序编程： CSS中一些@规则的用法简介
