• 技术文章 >Web开发 >css教程

    css使用transform垂直对齐

    小妮浅浅小妮浅浅2021-08-24 20:43:25原创3833

    说明

    1、使用transform从单行文本、段落到box,都会垂直对齐。

    2、translate属性可以改变元素的位置,translateX(10px)实现x坐标轴移动10个单位,如果是负值,则沿相反方向移动。

    同样,translateY可以实现Y坐标轴的位移;transform:translate(-50%,-50%)表示先沿x坐标移动元素本身宽度50%的长度(负值相反方向),再沿y坐标移动元素本身高度50%的长度(负值反向)。

    实例

    .verticalcenter{
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    以上就是css使用transform垂直对齐的方法,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css transform
    品易云
    上一篇:css文档流的两种特性 下一篇:css中position常见的四个属性值

    相关文章推荐

    • css中浮动如何理解• css中流的概念介绍• css文档流的两种特性

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网