网站首页 语言 会计 互联网计算机 医学 学历 职场 文艺体育 范文
当前位置:学识谷 > 设计制作 > 网页设计

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

栏目: 网页设计 / 发布于: / 人气:3.85K

导语:CSS功能越来越完美,现在已经能做出各种各样的.样式,其中居中浮动也是Css知识点中的一个。以下是本站小编为大家搜集的CSS居中浮动元素的使用方法,供大家参考。

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复制内容到剪贴板

Test Float Element Center

Tags:CSS 居中 元素