CSS将子元素移动到父元素中心

最新推荐文章于 2023-07-11 12:03:20 发布

s－010101

最新推荐文章于 2023-07-11 12:03:20 发布

阅读量1.3k

点赞数 1

分类专栏： Web学习文章标签： css

本文链接：https://blog.csdn.net/m0_46527751/article/details/124037643

版权

Web学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS将子元素移动到父元素中心

在绝对定位中将top和left值设为0是表示距离父元素左部和顶部距离为0，子元素处在父元素左上角

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.parent {
    background-color: #ff8787;
    height: 800px;
    width: 800px;
    margin: 0 auto;
 
    /* 为父级容器开启相对定位 */
    position: relative;
}
 
.child {
    background-color: #91a7ff;
    width: 400px;
    height: 400px;
    /* 子元素开启相对定位 */
    position: absolute;
    top: 0;
    left: 0;

}
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>

在这里插入图片描述
将top设为50%时，这里的50%是相对于父元素，相当于子元素顶部距离父元素顶部的距离相当于父元素高度的一半，即将子元素往下移动到父元素高度的50%处
（此处只有子元素CSS，其他代码和上面相同）

.child {
    background-color: #91a7ff;
    width: 400px;
    height: 400px;
    /* 子元素开启相对定位 */
    position: absolute;
    top: 50%;
    left: 0;

}

在这里插入图片描述
再将left设为50%时
将left设为50%时，这里的50%是相对于父元素，相当于子元素顶部距离父元素左部的距离相当于父元素宽度的一半，即将子元素往右移动到父元素宽度的50%处

.child {
    background-color: #91a7ff;
    width: 400px;
    height: 400px;
    /* 子元素开启相对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
}

在这里插入图片描述

将子元素左上角的顶点看作原点的话，向下向右移动50%后，原点处于父元素中心，然后transform: translate(-50%, -50%);相当于将图片向左移动图片宽度的一半，向上移动图片高度的一半，及将子元素中心移动到父元素中心位置，子元素处于父元素中心

.child {
    background-color: #91a7ff;
    width: 400px;
    height: 400px;
    /* 子元素开启相对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

在这里插入图片描述