translate(-50%,-50%)实现居中

最新推荐文章于 2023-06-14 20:54:09 发布
最新推荐文章于 2023-06-14 20:54:09 发布
阅读量1.5w 收藏 10
点赞数 6

转载链接：http://www.imooc.com/qadetail/129282

<!--html-->
<body>
<div>这是用来测试的</div>
</body>
/*CSS*/
div{
position:absolute;
top:50%;
left:50%;  /*如果把这几行删掉，不可以居中 */
border-radius: 5px;
-webkit-transform:translate(-50%, -50%);
   -moz-transform:translate(-50%, -50%);
        transform:translate( -50%, -50%);
        }

translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动

如果设置了

position:absolute;
top:50%

那DIV的左边边框会移动到父级（上面的代码中，DIV的父级就是body）的中央，而不是你的DIV的中心与body的中心重合。

引申出新问题：采用absolute进行布局/定位的缺点。

picoasis
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
react-native-knowledge:关于本机的摘要
05-01
react-native 相关知识 后面简称 RN。 实现Toast或Dialog 在css里面，实现方式： 各种postion定位 z-index设置成最大 top，left各50% margin-left, margin-top设置成宽高的一半（如果元素宽高不定，可以使用transform: translate(-50%, -50%)） RN本身没有z-index的这种层的概念，如果元素出现在相同的位置，后面的元素会覆盖前面的元素。 居中对于flex来说就是小case了,只需要在父元素上面加上： flex: 1, justifyContent: 'center', alignItems: 'center' 参考 background-image repeat效果 css 里面的实现方式没啥好说的。 RN 不支持 background-image 这货，repeat 更不用想了，可以用
css hover出现文字,hover显示文字
weixin_33253331的博客
08-03 4179
Simple Tile Hover Effect.tiles {width: 1040px;font-size: 0;text-align: center;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.tiles .t...
利用translate()进行水平垂直居中
热门推荐
mr_fzz的博客
11-08 2万+
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html: <div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中 </div>//css .wrap{ padding:10px; background:green; color:#fff; position:abso
transform: translate(-50%,-50%)
上辈子是条蜀道吧的博客
06-10 1179
.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
transform:translate(-50%,-50%)实现水平垂直居中
weixin_30367169的博客
11-21 135
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top:50%;left:50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 与负margin-left和margin-top实现居中不同的...
ie浏览器样式兼容写法_常见的CSS样式兼容性写法
weixin_42321086的博客
12-29 1021
1. 设置透明度在IE6中使用 filter: alpha(opacity = 40);在其他浏览器中使用 opacity: 0.4;2. 设置行高/*\9表示兼容所有的IE浏览器*/line-height: 35px\9;3. 清除浮动.clearfix:after {content: '';height: 0;clear: both;overflow: hidden;visibility: h...
translate()函数，水平垂直居中
weixin_58431406的博客
06-14 1588
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
CSS中的translate(-50%,-50%)实现水平垂直居中效果
01-21
与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比 (使用top和left为50%时，以窗口左上角为原点)。 示例： ...
利用纯CSS实现居中的七大方法示例
09-24
主要给大家介绍了关于利用纯CSS实现居中的七大方法，其中包括line-height居中法、table-cell居中法、上下左右定位+margin居中法、50%定位+margin居中法、50%定位+translate居中法、Flexbox居中法以及Flexbox+margin...
CSS3 不定高宽垂直水平居中的几种方式
01-19
1、flex布局 .father { display: flex; justify-content: center; align-items: center;... transform: translate(-50%, -50%); } IE9以下不支持transform属性 3、table + table-cell .father { display: tabl
CSS垂直水平居中的各种解决方法汇总 (ฅ´ω`ฅ)已阅留爪
01-08
目录 CSS水平居中 文本水平居中 单个块级元素水平居中 多个水平排列的块级元素 ...方法3：设置absolute和transform:translate(-50%,-50%) CSS垂直水平居中 方法1：设置absolute和margin 方法2：设置absolute和transf
css——利用translate让元素居中
叶落无痕的博客
08-30 1059
css——利用translate让元素居中 父元素： position: relative; 居中元素： position: absolute; top: 50%; //基于父元素 left: 50%; //基于父元素 transform: translate(-50%, -50%); //基于自身 注意：此方法可能会导致像素模糊问题，因为CSS 的 transform： translate 属性在作元素位移时，极有可能发生像素点无法对齐的情况。正常情况下，元素的边缘应该和像素..
css3中圆性渐变,CSS3 方和圆的交替渐变动画
weixin_42502366的博客
08-03 280
CSS语言：CSSSCSS确定.circle {position: fixed;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transform-origin: 0% 0%;transform-origin: 0% 0%;border: 2px...
transform使用导致元素内字体出现模糊的坑
qq_42351675的博客
03-30 1801
项目中遇到的，关于居中弹出层的字体模糊问题。看看你是不是用了transform: translate？ 模糊 清晰 不定宽高的弹出框，居中的方式如下代码： .el-dialog { position: absolute; top: 50%; left: 50%; margin: 0 !important; -webkit-transform: translate(-50%, -50%); transform: translate(-50%,
css 居中50%,CSS中的translate(-50%,-50%)实现水平垂直居中效果
weixin_35128928的博客
08-04 702
translate(-50%,-50%) 属性：向上和左，移动自身长宽的 50%，使其居于中心位置。与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比(使用top和left为50%时，以窗口左上角为原点)。示例：Document.container {position: r...
利用translate进行上下居中，你会了吗？
阿小绿的博客
07-07 579
话不多说，先看效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>上下左右居中</title> <style type="text/css"> .box { wid
left:50%； transform:translate(-50%)；
x1037490413的博客
07-26 1687
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 ...
移动端transform: translate(-50%, 0)的兼容写法
yangwq的博客
11-13 2577
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中的“ transform: translate(-50%, -50%)； “的意思
最新发布
qq_45207162的博客
06-14 4667
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
transform: translate(-50%, -50%);是什么意思
06-06
`transform: translate(-50%, -50%);` 是一种 CSS3 中的变形属性，作用是通过平移元素的位置，来实现元素的...因此，`translate(-50%, -50%)` 表示将元素自身的中心点平移到其父元素的中心点位置，从而实现居中对齐。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值