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

作者：trigkit4 字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS,居中等相关知识,trigkit4 希望在学习及工作中可以帮助到您

方法一

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

div{
width:500px;
height:300px;
margin:-150px 0 0 -250px;
position:absolute;
left:50%;
top:50%;
background-color:#000;
}

方法二

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

<!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>

您可能想查找下面的文章:

相关文章

2017-08-06css属性行高line-height的用法详解
2017-08-06css3闪亮进度条效果实现思路及代码
2017-08-06CSS外边距合并代码
2017-08-06使用CSS的border属性构建变形边框的方法总结
2017-08-06元素及文本的水平居中/垂直居中/绝对居中总结
2017-08-06css样式限制、防止表格被连续英文字母拉长及控制大图片的网页宽度
2017-08-06通过float实现两个div不换行
2017-08-06通过CSS规则禁止选中文字的实现代码
2017-08-06img与容器下边界的空隙（缝隙）的解决方法
2017-08-06css 英文换行 css(word-wrap/break)使纯英文数字自动换行

文章分类

最近更新的内容