CSS居中效果之transform的如何使用

如果你相信一件事,就去相信,不用等别人来告诉你行或者不行!早安!你不能改变过去,但你可以改变未来。早安!争气永远比生气漂亮。

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

CSS Code复制内容到剪贴板
  1. .is-Transformed{
  2. width:50%;
  3. margin:auto;
  4. position:absolute;
  5. top:50%;left:50%;
  6. -webkit-transform:translate(-50%,-50%);
  7. -ms-transform:translate(-50%,-50%);
  8. transform:translate(-50%,-50%);
  9. }

好处:

内容高度可变
代码量小

同时注意:

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

本文CSS居中效果之transform的如何使用到此结束。行动是成功的阶梯,行动越多,登得越高。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例