使用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>