爱吾下载 - 努力做内容最丰富最安全的下载站!

爱吾下载站

当前位置:爱吾下载 > 网页制作 > 使用CSS居中浮动元素的方法

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

发表时间:2015-07-30 08:50作者:fang人气:更新时间:2025-10-06 23:13:15

方法一

设置容器的浮动方式为绝对定位

然后确定容器的宽高 比如宽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,居中,浮动,元素,方法,方法,设置,容器,浮动

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号