常用盒子居中的方法

最新推荐文章于 2024-05-18 11:09:56 发布

梦中花未落

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量235

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/ch3135991966/article/details/131552009

版权

第一种盒子居中方法:flex布局

            /* 设置弹性布局  */
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: cente

缺点:盒子无法覆盖其他标准流

第二种盒子居中方法:margin+定位(子绝父相)


 .father {
             /* 相对定位 */
            position: relative;
            width: 500px;
            height: 300px;
        }

 .son {
            /* 绝对定位 */
            position: absolute;
             width: 200px;
            height: 100px;
            /* 移动父元素的一半 */
            top: 50%;
            left: 50%;
            /* 移动当前子元素自己宽高发一半 */
            margin-left: -100px;
            margin-top: -50px;
          }

缺点:盒子子的宽高要固定

第三种盒子居中的方法:位移+定位(子绝父相)最常用

 .father {
             /* 相对定位 */
            position: relative;
            width: 500px;
            height: 300px;
        }

 .son {
            /* 绝对定位 */
            position: absolute;
            /* 移动父元素的一半 */
            top: 50%;
            left: 50%;
            width: 200px;
            height: 100px;
            /* 移动当前子元素自己宽高发一半 */
             transform: translate(-50%,-50%);
          }

第四种盒子居中的方法:定位加margin实现

 .father {
             /* 相对定位 */
            position: relative;
            width: 500px;
            height: 300px;
        }

 .son {
            /* 绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
             /* 上下左右外边距自适应 */
            margin: auto;
          }