1.定位有以下几种：绝对定位，相对定位，fixed定位等

2.fixed定位是针对于整个页面来说的，浮动于定点处，不适合，相对定位针对的是本来自己的位置，也不适合做相对于父元素的垂直左右居中，我们要用的是绝对定位
3.案例

先创建一个父盒子,一个子盒子：





<body>


<div class="father">


<div class="son">




        </div>





    </div>


 


</body>


<style>


    .father{


        width: 500px;


        height: 500px;


        ">grey;


    }


    .son{


        width: 100px;


        height: 100px;


        ">red; 


    }


</style>





 




然后得到一个这样的图片




 


 最后利用绝对定位来做：




<body>
    <div class="father">
        <div class="son">

        </div>

    </div>
    
</body>
<style>
    .father{
        position: relative;
        width: 500px;
        height: 500px;
        background-color:grey;
    }
    .son{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background-color:red; 
    }
</style>




结果：




 


 缺点：需要知道本身这个子盒子的宽度，利用margin-left、margin-top负一半宽度去调整