CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中

最新推荐文章于 2023-06-14 20:54:09 发布

JaneLeeee

最新推荐文章于 2023-06-14 20:54:09 发布

阅读量2.6k

点赞数

分类专栏： CSS学习笔记文章标签： css css3 html

原文链接：https://blog.csdn.net/qq_41083105/article/details/115233510

版权

CSS学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考：
https://blog.csdn.net/qq_41083105/article/details/115233510
https://www.cnblogs.com/knuzy/p/9993181.html

translate()的使用

translate() 函数是CSS3的新特性。在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。

当使用下述样式，块是以左上角为原点，故不处于中心位置。

top: 50%;
left: 50%;

而 translate(-50%,-50%) 作用是，往上（x轴）、左（y轴）移动自身长宽的 50%，以使其居于中心位置。与负 margin-left 和 margin-top 实现居中不同的是，margin-left 必须知道自身的宽高，而 translate() 可以在不知道宽高的情况下进行居中，tranlate() 函数中的百分比是相对于自身宽高的百分比，所以能进行居中。具体实现如下：

<style>
        .outer {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: rgb(75, 233, 27);
        }
 
        span {
            position: absolute;
            background-color: red;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
			-moz-transform: translate(-50%,-50%);
            transform: translate(-50%, -50%);
        }
</style>
 
<body>
    <div class="outer">
        <span></span>
    </div>
</body>

上述代码详解：

外层盒子.outer：设置了宽和高，因为是父级，所以设置了相对定位，默认位置在左上角，并设置了背景色为绿色。
子元素span：将其绝对定位，给定宽高，并让其位置定位在画面中心的右下角（想象屏幕中间有一个十字，这个span就紧贴着第四象限），这是因为盒子以左上角为原点；然后利用 transform 属性，将其往左平移span自身长度的50%，往上平移span自身长度的50%，这样中间的盒子就居中了。

注意：绝对定位后，行内元素 span 变成了块级元素，可以设置宽和高。
效果图如下，绿色为外层盒子.outer，红色为子元素span：
在这里插入图片描述

进阶

要实现块水平垂直居中，更方便的方法是适用 flex。可将父盒子设置为以下样式：

display:flex;
align-item:center;
justify-content:center;

在浏览器开发工具中，设置了 flex 的元素的标签上都会显示 flex 的标志，点一下，在样式中看，就可以通过选择的方式来设置 flex 布局，而不需要只在代码中写，然后刷新页面这么麻烦了。

JaneLeeee

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中

参考：https://blog.csdn.net/qq_41083105/article/details/115233510https://www.cnblogs.com/knuzy/p/9993181.htmltranslate()的使用translate() 函数是CSS3的新特性。在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用下述样式，块是以左上角为原点，故不处于中心位置。top: 50%;left: 50%;而 translate(-50%,-50%) 作用是，往
复制链接

扫一扫