盒子水平垂直居中的4种方法

最新推荐文章于 2023-11-03 10:33:06 发布

滑稽之霸

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_42926749/article/details/82666673

本文详细解析了在网页布局中使用绝对定位、弹性盒子等布局方式时，如何通过设置不同的宽度来实现元素的精准定位和响应式设计。通过两种不同宽度设置的方法，展示了如何利用CSS属性如position、justify-content、align-items等来调整div元素的位置，并讨论了确定宽度与不确定宽度在实际应用中的优劣对比。

不确定宽度：

第一种

        div{
            padding: 30px;
            background: orange;
            font-size: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

第二种

        div{
            height: 300px;
            padding: 30px;
            background: orange;
            font-size: 30px;
            justify-content: center;
            align-items: center;
            display: flex;
        }

确定宽度：
第一种

        div{
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

第二种

        div{
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            left:0;
            right:0;
            top: 0;
            bottom: 0;
            margin: auto;
        }