CSS(八) 常见的居中定位

常见的居中定位

一般我们定位都会使用到position这个属性

1、position:static;

static 这个定位我们称之为静态定位，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                background: #555555;
                width: 200px;
                height: 200px;
            }
            .div1{
                position: static;
                left: 500px;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
</html>

结果：

2、position: relative : 生成相对定位的元素，相对于其正常位置进行定位。元素位置还是处于正常流中，但是本身可以脱离原来位置。left，right，bottom，top将根据自身位置产生变化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                display: inline-block;
                width: 200px;
                height: 200px;
            }
            .div1{
                background: #555555;
                position: static;
                left: 500px;
            }
            .div2{
                background: #55ff55;
                position: relative;
                left: 500px;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

结果：

3、position：absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素脱离正常流，出现浮动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body>div{
                width: 200px;
                height: 200px;
            }
            .div1{
                background: #555555;
                margin: 0 auto;
                position: static;
            }
            .div-son1{
                position: absolute;
                background: #ff5555;
                width: 100px;
                height: 100px;
            }
            .div-son2{
                position: absolute;
                background: #5555ff;
                width: 100px;
                height: 100px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <!--当父元素为static定位，一但使用了left、top、bottom、right，元素就向上会寻找父节点不是static的元素-->
            <div class="div-son1"></div>
            <div class="div-son2"></div>
        </div>
    </body>
</html>

结果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body>div{
                width: 200px;
                height: 200px;
            }
            .div1{
                background: #555555;
                margin: 0 auto;
                position: relative;
            }
            .div-son1{
                position: absolute;
                background: #ff5555;
                width: 100px;
                height: 100px;
            }
            .div-son2{
                position: absolute;
                background: #5555ff;
                width: 100px;
                height: 100px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <!-- 绝对定位，是绝对于父元素的，不受其他元素的影响 -->
            <div class="div-son1"></div>
            <div class="div-son2"></div>
        </div>
    </body>
</html>

结果：

4、position: fixed ;生成固定定位的元素，相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .div1{
                height: 2000px;
            }
            #fixed{
                position: fixed;
                top: 300px;
                background: #ff00ff;
                height: 100px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div id="fixed"></div>
    </body>
</html>

　结果：滚动滚动条div也一直地固定在页面

5、居中定位：水平居中-margin:0 auto;

.div1{
    height: 200px;
    width: 200px;
    margin: 0 auto;
    background: #ff0000;
}

6、垂直居中

.div1{
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    background: #ff0000;
}

8、中间居中

.div1{
    height: 200px;
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-bottom: -100px;
    background: #ff0000;
}

.div1{
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: #ff0000;
}