zoukankan      html  css  js  c++  java
  • position和transform使元素居中的方法 (转载)

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

     .parent {
       positioin: relative;
     }
     .child {
       positioin: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
    

    页面宽高正常显示和页面宽高缩放显示时,都保持,上下左右居中显示

    二、 transform:translate (-50%,-50%) 造成的文字模糊和解决方案
    这是因为transform时div的宽度或者高度并不是偶数,移动50%之后,像素点并不是整数,出了小数,和显示像素没有对上。
    解决方案是使用flex完成垂直居中,设置排列方向为column,并设置justify-content: center,最后用text-align: center完成水平居中。方能保证文字显示清晰。

    优化方法:

    1. 将transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)可以解决抖动,但仍然模糊。

    2. 将元素的高度设置为偶数可解决;

    3. 将transform: translate(-50%, -50%)中的y轴单位改成px也可以解决

    4. 改成transform: translate(-50%, -52%)也可以解决(如果52%不行则从51%每个百分比尝试)

      以上方法能较大程度优化问题,但仔细查看仍有细微抖动,最后用了第4种方法。

  • 相关阅读:
    雪花降落CADisplayLink
    图片分离--分成两片
    判断是否输入表情符号
    字符串过滤
    UICollectionView Layout自定义 Layout布局
    本地化 NSLocal
    CAAnimation动画--(旋转/缩放/移动/闪烁)
    摇一摇
    监听键盘升降
    ❄️ 雪花降落
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12714917.html
Copyright © 2011-2022 走看看