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

时间：2020-11-27 来源：智榕旅游

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

方法一

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

 p{ 
 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> 
 <p class="p"> 
 <h1 class="c">Test Float Element Center</h1> 
 </p> 
</body> 
</html>