H5学习之23 CSS 水平对齐(定位，调整位置)_h5 style位置调整-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_29469941/article/details/52130298

本文介绍了CSS中实现元素水平对齐的三种方法：通过margin自动调整，利用position相对定位以及使用浮动。详细解释了每种方法的实现原理和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;

        }

        #margin {
            width: 200px;
            color: darksalmon;
            background-color: black;

            margin-left: auto;
            margin-right: auto;
            /*auto是自动，这里会直接设置居中模式，自动设置左右外边距来使内部元素达到居中的效果*/
        }

        #position{
            width: 200px;
            color: darksalmon;
            background-color: black;

            position: absolute;
            right:0px;
            /*设置 绝对位置模式来定位,使用绝对定位模式之后，原先占据的空间会消失，与float一样*/
            z-index: -1;
            outline: red solid 10px;
            border: green solid 5px;
        }

        #float{
            width: 300px;
            color: darksalmon;
            background-color: black;
            float:right;
            /*设置float:right 属性后原先占据的空间也会消失。*/

            position: relative;
            top: 100px;
            /*这里再次做了一个相对定位，是为了相对于浮动之后不被遮挡再向下移动。
             不知道为什么这里没设置相对定位之前会被position遮挡，可能是浮动会被定位遮挡。
             （在这把z-index=1 不管用，但是给position一个-1就管用了,就解决了遮挡问题）
             做了相对定位之后就没了遮挡问题。

              为了向下移动还可以加一个margin-top
            */
        }

    </style>
</head>
<body>
三种水平对齐的方式（调整元素所处位置）

<div id="margin">
    <p>使用margin属性来实现水平对齐,width不能是100%</p>
</div>

<div id="position">
    <p>使用position属性来实现对齐，即位置的移动</p>
</div>

<div id="float">
    <p>使用float属性来实现对齐，位置的移动</p>
</div>

</body>
</html>

具体效果如下：

代码解释如下：

使用了3种对齐方式。其实也就是调整元素的位置。

前提

body{
    margin:0;
    padding:0;

}

去除了body的margin 和padding ，为了让结果显示更清楚。

第一种，通过给元素设置margin达到调整位置的目的。

<div id="margin">
    <p>使用margin属性来实现水平对齐,width不能是100%</p>
</div>

#margin {
    width: 200px;
    color: darksalmon;
    background-color: black;

    margin-left: auto;
    margin-right: auto;
    /*auto是自动，这里会直接设置居中模式，自动设置左右外边距来使内部元素达到居中的效果*/
}

我们知道，一个元素，如果不设置border，outline，背景颜色，那么他显示的是最核心的元素内容。核心元素+padding=border的范围。outline贴着border。而等于是border（也可以说是outline）及其以内是可被看见的。而border外是不可见的。border外是 margin，从border到margin这一范围是不可见的。也就是外边距。外边距margin决定着两个元素之间的距离（外边距会发生合并）

所以通过改变margin值可以改变元素的位置。

这里，直接设置margin为auto自动，就居中了。

第二种对齐，使用position属性

<div id="position">
    <p>使用position属性来实现对齐，即位置的移动</p>
</div>

#position{
    width: 200px;
    color: darksalmon;
    background-color: black;

    position: absolute;
    right:0px;
    /*设置 绝对位置模式来定位,使用绝对定位模式之后，原先占据的空间会消失，与float一样*/
    z-index: -1;
    outline: red solid 10px;
    border: green solid 5px;
}

这里使用绝对位置模式。

而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

这里相对于body。设置与body的右边相距0px

第三种，浮动。

<div id="float">
    <p>使用float属性来实现对齐，位置的移动</p>
</div>

#float{
    width: 300px;
    color: darksalmon;
    background-color: black;
    float:right;
    /*设置float:right 属性后原先占据的空间也会消失。*/

    position: relative;
    top: 100px;
    /*
    这里再次做了一个相对定位，是为了相对于浮动之后不被遮挡再向下移动。
     不知道为什么这里没设置相对定位之前会被position遮挡，可能是浮动会被定位遮挡。
     （在这把z-index=1 不管用，但是给position一个-1就管用了,就解决了遮挡问题）
     做了相对定位之后就没了遮挡问题。
      为了向下移动还可以加一个margin-top
    */
}