当前位置：Gxlcms > css > 使用CSS居中浮动元素的方法介绍

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

时间：2021-07-01 10:21:17 帮助过：47人阅读

这篇文章主要介绍了使用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>

以上就是使用CSS居中浮动元素的方法介绍的详细内容，更多请关注Gxl网其它相关文章！

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

人气教程排行