您现在的位置是：网站首页> 编程资料编程资料

CSS居中效果之transform的使用css3 transform属性详解CSS中使用负margin值来调整居中位置仅使用CSS做到完全居中的超级攻略

2023-10-24 225人已围观

简介 这篇文章主要介绍了CSS中使用transform达到布局居中的效果的方法,注意其和其他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. }  

2015715162720790.jpg (608×401)

好处：

    内容高度可变
    代码量小

同时注意：

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

上一篇：CSS中使用负margin值来调整居中位置css 布局 之 两端布局的实例代码 （利用父级负的margin）css如何利用负margin技术实现平均布局css布局之负margin妙用及其他实现css利用负margin实现平均布局的示例

下一篇：CSS中使用table-cell法来达到居中效果CSS居中效果之transform的使用CSS中使用负margin值来调整居中位置仅使用CSS做到完全居中的超级攻略

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网