元素的居中

最新推荐文章于 2024-09-20 14:39:18 发布

cqj0008

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏： css+html 文章标签：元素居中

本文链接：https://blog.youkuaiyun.com/cqj0008/article/details/78907110

css+html 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用CSS实现不同场景下盒子居中的四种方法：未知宽高的居中、固定宽高的居中、弹性盒子布局和绝对定位。每种方法都附带了适用场景和兼容性说明。

1.不确定宽高的情况下实现盒子的居中(无兼容问题)

/* 不确定宽高的情况下实现盒子的居中
左右的百分比是相等的,两个之间相加不能大于100%*/
#box {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 25%;
    bottom: 25%;
    background-color: #0ff;
}

2.固定的宽高(IE9+以上,最简单)

           *{
                margin: 0;  
                padding: 0;  
            }  
            .big{  
                width: 400px;  
                height: 400px;  
                background: blue;  
                border-top: 1px solid transparent;  
            }  
            .big>div{  
                width: 200px;  
                height: 200px;  
                background: red;  
                 /* 知道元素的宽高*/
                 /* 设置水平垂直自动适应*/
                margin: auto;
   /* 当 margin : 0 auto; 需要兼容的时候,可以设置 text-align : center;
   (两个条件: 必须有宽 必须是块级元素 ) */  
            }

3.用弹性盒子布局(IE9+以上)

    *{  
                margin: 0;  
                padding: 0;  
            }  
            /* 设置高为 100 的必要条件*/
            html {
                height : 100%;
            }
            body {
                height: 100%;
            }
          .big{  
        /* 设置高  设置父盒子的flex
        设置水平居中 和 垂直居中 */
            height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;  
        }  
        .big>div{  
            width: 200px;  
            height: 200px;  
            background: red;  

        }  

/* 如果知道两个盒子的宽高,可以通过margin 0 auto ,和设置上下的边距 */;

4.用position定位(无兼容问题,需要知道宽高)

        *{  
                margin: 0;  
                padding: 0;  
            }  
          .big{  
                width: 400px;  
                height: 400px;  
                background: blue;  
                position: relative;  
            } 
            .big>div{  
                width: 200px;  
                height: 200px;  
                background: red;  
                position: absolute;  
                top: 50%;  
                left: 50%;  
              margin-left: -100px;
              margin-top: -100px;
               /* transform : translate(-50%,-50%) 
                有兼容的问题,需要IE9+以上*/
            }