position & transform: translate(-50%, -50%) 实现块元素百分比下居中

最新推荐文章于 2024-03-19 08:00:00 发布
最新推荐文章于 2024-03-19 08:00:00 发布
阅读量3.4w 收藏 20
点赞数 6
分类专栏： Css / Html 文章标签： css定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dong_PT/article/details/51184896
版权

知识点：

  • CSS3： transform: translate(-50%, -50%);

代码示例：

这里写图片描述

HTML
<body>
    <div class="wraper center">
        <div class="inside center"></div>
    </div>
</body>
CSS
    html,
    body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .wraper {
        width: 80%;
        height: 80%;
        background-color: #ddd; 
    }

    .inside {
        width: 30%;
        height: 30%;
        background-color: blue;
    }

    .center { 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

效果图

页面宽高正常显示时：
这里写图片描述

页面宽高缩放显示时：
这里写图片描述

PTKGEM
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
元素居中 前端
qq_48254349的博客
11-26 181
<!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>Doc
CSS3笔记-2D转换
weixin_49455047的博客
11-22 317
CSS3笔记-2D转换
transform:translate(-50%,-50%)实现水平垂直居中
weixin_48181168的博客
07-10 313
translate()函数是css3的新特性. 在不知道自身宽高的情况下， 可以利用它来进行水平垂直居中.。 当使用：top:50%;left:50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴） 移动自身长宽的 50%，以使其居于中心位置。 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50...
transform：translate(-50%，-50%)定位实现百分比居中
xiaoxiezZ的博客
05-07 8048
HTML代码&lt;div id="translateTest"&gt;&lt;/div&gt;CSS代码#translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; bac...
vue2 实现数字滚动效果，翻页效果
最新发布
amoureux555的博客
03-19 1153
vue2 实现数字，数值自动滚动效果，翻页效果，引入直接使用
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
CSS绝对定位元素left设为50%实现水平居中
01-19
绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可。示例： [css] 复制代码代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中
Jane的博客
01-07 2290
参考： 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%) 作用是，往
详解transform:translate(-50%,-50%)
热门推荐
qq_41083105的博客
03-26 3万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 4515
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
transform: translate(-50%,-50%)
上辈子是条蜀道吧的博客
06-10 1144
.xx{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /*-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } 当使用left:50%;top:50;时，是以元素左上角为原点，向下移动50
利用vertical-align:middle实现行内元素的水平垂直居中对齐
12-13
最终实现效果为实现行内元素的水平、垂直居中对齐，效果图如下：   接下来为实现代码： 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title> 利用vertical-align实现图片垂直居中对齐 </title> <style> #content { position:absolute; top:0;right:0;bottom:0;left:0; margin:auto;
IE7下当position:fixed遇到text-align:center的解决方法
09-25
IE7下当position:fixed遇到text-align:center 的一些状况，大家可以参考下。
transform：translate(-50%，-50%)定位实现水平垂直居中
醉殇姒若梦遗年 ツ的博客
08-01 981
HTML代码 <div id="translateTest"></div> CSS代码 #translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:...
CSS之translate(-50%,-50%)实现水平垂直居中
qq_44731369的博客
08-30 3651
translate(-50%,-50%) 实现效果： 往上 (x轴)，左 (y轴)移动自身长宽的 50%，以使其居于中心位置。 与使用margin实现居中不同的是，margin必须知道自身的宽高，而 translate 可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比 示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
移动端transform: translate(-50%, 0)的兼容写法
yangwq的博客
11-13 2563
left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); 安卓与IOS样式不兼容，position:absolute 微信小程序 position: absolute位置错乱问题 ...
CSS元素居中
azurecho
10-26 272
文章目录CSS元素居中水平居中flex布局text-alignmarginposition+(margin/transform)垂直居中flex布局table+vertical-align单行inline：height=line-heightposition+(margin/transform)水平垂直居中flextableposition+(margin/transform)margin CSS...
css transform translate 自适应屏幕
08-16
要使CSS Transform的translate()函数自适应屏幕，你可以使用百分比单位或相对单位来定义平移的距离。这样，元素将相对于其容器进行移动，并在不同尺寸的屏幕上自动调整位置。 下面是一个示例，展示了如何使用CSS Transform的translate()函数来实现自适应屏幕的平移效果： ```css .my-element { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 在上面的示例中，.my-element是一个CSS类选择器，它应用在一个HTML元素上。通过将元素的left和top属性设置为50%，元素会相对于其容器水平居中和垂直居中。然后，使用translate()函数和百分比单位来实现自适应平移，-50%表示元素自身宽度和高度的一半。 这样，无论浏览器窗口的尺寸如何变化，元素都会保持在居中位置。 除了百分比单位，你还可以使用相对单位（如vw、vh）来定义平移距离，以便更好地适应不同大小的屏幕。 希望这个示例对你有帮助！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值