2019-07-29 非浮动，浮动的盒子居中方法

非浮动盒子居中的方法：

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

<style>

方法一、

.box1 {

            width: 400px;

            height: 400px;

            background: yellow;

            display: flex;

            justify-content: center;

            align-items: center;

        }

方法二、

.box1 {

            width: 400px;

            height: 400px;

            background: yellow;

            display: table-cell;

            vertical-align:middle;

        }

.box2 {

            width: 200px;

            height: 200px;

            background: red;

            margin: 0 auto

}

</style>

浮动盒子居中的方法：

.box1 {

            width: 400px;

            height: 400px;

            background: yellow;

            float: left;

            position: relative;

        }

.box2 {

            width: 200px;

            height: 200px;

            background: red;

            float: left;

            position: absolute;

            top:50%;

            left:50%;

            transform: translate(-50%,-50%)

        }

小结： 

不浮动盒子居中常用的两种方法：

方法一、父盒子：display：flex；justify-content：center；align-items:center。

方法二、父盒子：display：table-cell；vertical-align：middle；text-align：center。

               子盒子：margin：0  auto；

浮动的盒子居中的方法：

子绝父相    父盒子：position：relative；

                   子盒子：position：absolute；top：50%；left：50%；

                                 transform：translate（-50%，-50%）

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容