设置块元素水平垂直居中方法二

chill_ly

已于 2022-03-01 20:30:55 修改

阅读量70

点赞数

分类专栏：一阶段

于 2022-03-01 19:07:31 首次发布

本文链接：https://blog.csdn.net/qq_53640252/article/details/123213210

版权

CSS 绝对定位居中 transform translate

关键词由CSDN通过智能技术生成

一阶段专栏收录该内容

13 篇文章 0 订阅

订阅专栏

①子绝父相

②设置小div的left和top都为50%,向左、向上平移50%

<style>
        .big{
            width: 500px;
            height: 500px;
            border: 3px solid #f00;
            position: relative;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: green;
            border: 2px solid #000;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 二选一 */
            /* margin: -50px 0 0 -50px; （用margin的方法还必须知道移动多少距离）*/ 
            transform: translate(-50%, -50%);
        }
</style>
    <div class="big">
        <div class="small"></div>
    </div>