网站首页 网站建设 IT知识 IT知识教程 CSS居中效果之transform的使用

CSS居中效果之transform的使用

2021-05-08 21:10:38

简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

CSS Code复制内容到剪贴板
  • .is-Transformed{
  • width:50%;
  • margin:auto;
  • position:absolute;
  • top:50%;left:50%;
  • -webkit-transform:translate(-50%,-50%);
  • -ms-transform:translate(-50%,-50%);
  • transform:translate(-50%,-50%);
  • }

    • 好处：

    内容高度可变
    代码量小

    同时注意：

    不支持IE8
    需要写厂商前缀
    会和其他transform样式有冲突
    某些情况下的边缘和字体渲染会有问题

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章

    CSS3正方体旋转示例代码
    效果图：css代码：复制代码代码如下:@keyframesspin{from{transform:rotateY(0);}to{transform:rotate
    vue实现数字动态翻牌的效果（开箱即用）
    实现效果图原理将1~9的数字竖直排版，通过translate移动位置显示不同数字，使用transition控制transform属性有动画效果技术点css属性w
    CSS3控制HTML元素动画效果
    使用CSS3控制HTML元素的动画效果：1.对元素transform的控制先上例子：复制代码代码如下:.showbox{float:left;margin:4e
    浅谈CSS3中的变形功能-transform功能
    CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。1、如何使用transform功能
    css制作超萌吃豆豆加载动画效果
    豆豆加载效果point_down:html代码：point_down:css代码：@-webkit-keyframesup{0%,100%{transform:

    最新文章

    载入进度条 效果
    邮件发送简单例子-html文件
    详解关于html，css，js三者的加载顺序问题
    限制复选框的最大可选数
    随鼠标上下滚动的jquery代码

    hot 热门文章

    python模拟登陆Tom邮箱示例分享
    苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
    蚂蚁森林节气签怎么领
    华为mate30怎么更新系统？华为mate30更新手机系统教程
    小米电视怎么下载斗鱼

    猜你喜欢

    JavaScript 命名空间 使用介绍
    javascript ���名规则 变量命名规则
    javascript 秒表计时器实现代码
    Javascript 面向对象之重载
    JavaScript 面向对象之命名空间
    以上产品还未完全满足我的所有需求，在下方提交我的专属需求
    我的专属需求：
    *手机号：
    *验证码：
    img
    咨询报价
    现在咨询
    img

    在线咨询

    建站在线咨询
    img

    获取方案

    获取建站报价/方案

    我们联系您img

    img

    微信咨询

    扫一扫添加
    动力姐姐微信
    img
    img

    TOP

    我们尽快联系您