div中的div水平垂直居中

一名写前端的GISer

于 2020-03-13 15:54:52 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： Html&Css

原文链接：https://blog.youkuaiyun.com/sleepwalker_1992/article/details/80656170

Html&Css 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用CSS的transform属性结合绝对定位，实现子元素在其父容器内的精确居中。通过设置top和left为50%，并使用transform: translate(-50%, -50%)，可以使子元素无论其大小如何都能完美居中于父容器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子绝父相，定位到大盒子的宽高一半的位置，再用transform: translate向左向上移动自己宽高的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 600px;
            height: 600px;
            background-color: orangered;
            position: relative;
        }
        .son{
            width: 300px;
            height: 200px;
            background-color: lawngreen;
            position: absolute;
            top: 50%;
            left: 50%;
            /*用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="son"></div>
       </div>
</body>
</html>

转自：https://blog.youkuaiyun.com/sleepwalker_1992/article/details/80656170