码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-30 21:14:02      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:absolute   title   char   image   三种方式   tom   pos   面试   device   

        * {
            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做简单的运算,移动到某个位置,同样能实现水平居中和垂直居中的效果,但是方法很奇葩,了解就行...

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

标签:absolute   title   char   image   三种方式   tom   pos   面试   device   

原文地址:https://www.cnblogs.com/liuyuexue520/p/12121547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!