盒子水平垂直居中的几种方式

前端

盒子水平垂直居中的几种方式

第一种:父级添加display: flex;需要居中的块级添加margin: auto
第二种:定位，自身 left:50%;top:50%; margin-left: 负值（自身宽度的 一半）px; margin-top: 负值（自身高度的一半）px;缺点需要知道自身的宽高
第三种:定位，自身 left:50%;top:50%; transform: translate(-50%,-50%)；( translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。) 缺点考虑浏览器兼容；
第四种:定位， top: 0; bottom: 0;left: 0; right: 0; margin: auto;推荐
html

<div class="big">
    <div class="small">第一种</div>
</div>
<div class="big2">
    <div class="small2">第二种</div>
</div>
<div class="big3">
    <div class="small3">第三种</div>
</div>
<div class="big4">
    <div class="small4">第四种</div>
</div>

CSS

<style>
        .big,.big2,.big3,.big4{
            width: 400px;
            height: 400px;
            background-color: #0f0;
            margin-top: 10px;
        }
        .small,.small2,.small3,.small4{
            width: 200px;
            height: 100px;
            background-color: #0ff;
        }
/*第一种*/
        .big{
            display: flex;
        }
        .small{
            margin: auto;
        }
        /*第二种*/
        .big2{
            position: relative;
        }
        .small2{
            position: absolute;
            left:50%;
            top:50%;
            margin-left: -100px;
            margin-top: -50px;
        }
        /*第三种*/
        .big3{
            position: relative;
        }
        .small3{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%); /* IE 9 */
            -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
            /*margin-top: -50px;*/
        }
        /*第四种*/
        .big4{
            position: relative;
        }
        .small4{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>