未知宽度的元素实现水平垂直居中

最新推荐文章于 2022-09-01 20:16:38 发布

我是坏人我霸道

最新推荐文章于 2022-09-01 20:16:38 发布

阅读量155

点赞数

分类专栏： h5c3练习文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_44369304/article/details/120248053

版权

h5c3练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

transform: tranlate(-50%,-50%)的使用

今天复习到元素的水平垂直居中时，发现有一种方法是绝对定位加上元素平移来实现，初看时非常好奇为什么要加上元素平移，这个元素平移起到什么作用，然后打了个demo简单分析了一波。

<style>
        * {
            margin: 0;
            padding: 0;
        }
        #outer {
            width: 200px;
            height: 200px;
            background-color: brown;
            position: relative;
        }
        #inner {
            width: 50px;
            height: 60px;
            background-color: cadetblue;
            /* 实现水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

这是不加平移的效果：
在这里插入图片描述
我们可以发现，绝对定位的定位点其实是子元素的左上顶点，只是使用绝对定位无法实现水平垂直居中，这时候我们要调整子元素，让它的中心点平移到原先左上顶点的位置。

要做到这点，我们只要把元素像上平移其自身的一半高度，像左平移其自身的一半宽度即可实现。
在这里插入图片描述

/* 实现水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 上面这样实现后，在父元素内水平垂直居中的是子元素的左上顶点 */
            /* 要使子元素水平垂直居中，我们要把子元素的中心点平移到其原先左上顶点的位置 */
            transform: translate(-50%,-50%);

加了平移的效果：
在这里插入图片描述
总的来说，这个方法可以用来实现不知道宽高的子元素的水平垂直居中。

我是坏人我霸道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
未知宽度的元素实现水平垂直居中

transform: tranlate(-50%,-50%)的使用今天复习到元素的水平垂直居中时，发现有一种方法是绝对定位加上元素平移来实现，初看时非常好奇为什么要加上元素平移，这个元素平移起到什么作用，然后打了个demo简单分析了一波。<style> * { margin: 0; padding: 0; } #outer { width: 200px;
复制链接

扫一扫

专栏目录