实现盒子居中的方式[经典面试题]

* {
            margin: 0;
            padding: 0;
        }

        .box1 {
            float: left;
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .son1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .box2 {
            /* float: left; */
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .son2 {
            display: inline-block;
        }
        .box3 {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-top: -1px;
        }
        .son3 {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

        }

上面是css代码,放在哪里就不用多说了,接着是html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现盒子居中的三种方式</title>
</head>

<body>
    <div class="box1">
        <div class="son1">盒子1</div>
    </div>
    <div class="box2">
        <div class="son2">盒子2</div>
    </div>
    <div class="box3">
        <div class="son3">盒子3</div>
    </div>
</body>

</html>

附上结果图

实现盒子居中的方式[经典面试题]

说一下原理:第一种是利用定位和c3中的属性transform移动自身的-50%,来实现居中效果,不用考虑自身宽高;

第二种是把父级盒子转换成table-cell模式.也就是单元格模式,然后水平居中,垂直居中(就是图片居中的vertical-align: middle),子盒子设置成行内块模式,前提是父子级盒子都必须指明宽高;

第三种方式,是利用的子绝父相定位,子盒子定位使用margin:auto;自动适应,然后top,left,right,bottom都设置为零(方法有点偏门);

另外,还有一些方式,提及一下;

1 > .移动端flex布局中有设置Y轴为主轴的方式,还有就是垂直和水平居中,同样能让盒子水平垂直居中.

2 > . js中同样有些方法能在不知道父盒子和子盒子的宽高的情况下,返回拥有实际宽高度的盒子的宽和高,然后子绝父相,通过js做简单的运算,移动到某个位置,同样能实现水平居中和垂直居中的效果,但是方法很奇葩,了解就行...

实现盒子居中的方式[经典面试题]

相关推荐