CSS垂直居中实际效果之transform的应用

日期:2021-03-05 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

简易合理,另外适用可变高宽比。为內容特定带有厂商前缀的transform: translate(⑸0%,⑸0%)和top: 50%; left: 50%;款式便可以让內容块垂直居中。
 

CSS Code拷贝內容到剪贴板
  1. .is-Transformed {    
  2.   width: 50%;   
  3.   marginauto;   
  4.   positionabsolute;   
  5.   top: 50%; left: 50%;   
  6.   -webkit-transform: translate(⑸0%,⑸0%);   
  7.       -ms-transform: translate(⑸0%,⑸0%);   
  8.           transform: translate(⑸0%,⑸0%);   
  9. }  

益处:

    內容高宽比可变
    编码量小

另外留意:

    不适用IE8
    必须写厂商前缀
    会和别的transform款式有矛盾
    一些状况下的边沿和字体样式3D渲染会有难题

上一篇:应用Sass来撰写朝向目标的CSS编码 返回下一篇:没有了