CSS---子div在父div中水平垂直居中

2021-10-21 13:49:27

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DIV水平垂直居中</title>
    <style type="text/css">
        .max_box{
            position: relative;
            width: 500px;
            height: 500px;
            background: #ccc;
            border: 1px solid #999;
        }
        .min_box{
            width: 200px;
            height: 200px;
            background: #fc0;
            border: 1px solid #f60;
        }

        /*种： CSS定位，主要利用定位，再用margin设置为auto*/
        .align1{
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

        /*第二种： CSS定位 主要利用定位，再用margin调整到中间位置。*/
        .align2{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;   /*width/-2*/
            margin-top: -100px;    /*height/-2*/
        }

        /*第三种： CSS定位 + Javascript/JQuery
        主要利用定位，再用Javascript/JQuery调整到中间位置。相比种方法，此方法提高了class的灵活性。
        实测在IE11、FF、Chrome完美呈现
        */
        .align3{
            position: absolute;
            left: 50%;
            top: 50%;
        }


        /*第四种： CSS3定位 + 位移
        使用定位与CSS3的 transform: translate同样也可以达到效果。
        实测在IE11、FF、Chrome完美呈现
        */
        .align4{
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }

        /*第五种： Flexbox: [伸缩布局盒模型]
        要让元素水平垂直，对于Flexbox模型来说太容易了。
        实测在IE11、FF、Chrome完美呈现
        */

        .align5{
            display: flex;
            justify-content:center;/*水平居中*/
            align-items:center;/*垂直居中*/
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="max_box">
        <div class="min_box align4"></div>
    </div>

    <!-- 第五种得改变结构如下 -->
    <!-- 
    <div class="max_box align5">
        <div class="min_box"></div>
    </div> 
    -->


    <script type="text/javascript">
        // $(function(){
        //     $(".align3").css({
        //         "margin-left":($(".align3").width()/-2),
        //         "margin-top":($(".align3").height()/-2)
        //     });
        // });
    </script>
</body>
</html>

几种方法的比较：

种：使用CSS定位margin设置为auto，兼容性很好，应该是一种更好的方法了。
第二种：使用CSS定位margin调整，兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要写不同的 .align-center 。
第三种：使用脚本语言，兼容性很好且弥补了种的缺点。不因width，height的改变而影响水平垂直居中的效果。
第四种：使用CSS3的一些新的属性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改变而影响水平垂直居中的效果。
第五种：使用Flexbox模型，兼容Firefox、Opera 和 Chrome，IE全军覆没。也是不因width，height的改变而影响水平垂直居中的效果。

上一篇：纯css使div垂直居中 div垂直下一篇：巧用 CSS3 filter(滤镜)

网站建设

Css

CSS---子div在父div中水平垂直居中