transform的作用

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool)

transform的兼容性

transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换。

谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。

想必大家在实际项目中肯定会遇见div不定宽和高垂直水平居中的问题。记得以前都是用js去实现。

其实用css来实现也有好几种方法。但是个人觉得还是用transform来实现更简单和方便就是不兼容IE9以下浏览器。

现在给大家展示最近项目当中运用到的实例

在写轮播图的时候下面那些圆点按钮是根据图片张数来确定按钮个数的。所以在写代码时就不能固定承载这些按钮元素的宽,而且还要居中显示。

       <div class="scroll">
<div class="scroll_pic">
<a href="#"><img src="img/pic1.jpg" alt=""/></a>
<a href="#"><img src="img/pic2.jpg" alt=""/></a>
<a href="#"><img src="img/pic3.jpg" alt=""/></a>
<a href="#"><img src="img/pic.jpg" alt=""/></a>
</div>
<ul>
<li class="scroll_in"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.scroll {
width: 720px;
height: 410px;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
position: relative;
} .scroll ul {
padding: 10px 0px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: absolute;
bottom: 0px;
left: 50%;
} .scroll ul li {
float: left;
margin: 0px 5px;
width: 16px;
height: 16px;
border-radius: 16px;
border:1px #73B613 solid;
background: #FCBE47;
box-sizing: border-box;
} .scroll ul li.scroll_in{
background:#FF6600;
}

上面实例当中承载这些按钮的是一个ul元素,ul元素没用定宽高,写了一个定位left:50%离左边百分之五十,如果不写transform的话这样并不居中,右边宽度会包括自身ul的宽度。

transform: translateX(-50%); 这一句的作用就是让ul相对自身位置水平左移自身50%的宽度。这样就刚好实现我们想要的效果。

在实际项目当中我们用的多的还有就是模态框,用div模拟弹窗效果。

上图中的图片是水平垂直居中的。

<div class="demo">
   <img src="img/pic3.jpg" />
</div>
.demo{
position: fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}

其实上面实例和我们写弹窗让其居中是一样的。是不是很简单,有了这个我们就不要用写这么多js求来求去的了。

css3之transform属性实现div不定宽高垂直水平居中的更多相关文章

  1. transform的妙用---实现div不定宽高垂直水平居中

    transform的兼容性 transform的兼容性还是比较乐观的.IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换. 谷歌和Safari支持代替的-webkit- ...

  2. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  3. 不定宽高的DIV,垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  4. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  5. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  6. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  7. css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  8. table 与 div 固定宽高问题

    div {width:100px;height:200px;word-wrap: break-word;overflow:hidden;} 这个可以固定div的宽高,溢出内容会被剪除. table{t ...

  9. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

随机推荐

  1. Ubuntu系统的安装(虚拟机) 并配置C/C++编译器

    一.系统的初始化配置 1.配置静态IP和DNS 配置静态IP 1.sudo vim /etc/network/interfaces,修改文件内容如下: auto eth0  #表示让网卡开机自动挂载e ...

  2. 安装MySQL-python时报错

    (py27) [root@test SimpletourDevops]# pip install MySQL-python DEPRECATION: Python 2.7 will reach the ...

  3. 菜鸟--shell脚本编写之解决问题篇

    一.执行时发现adb shell进入设备后不再继续往下执行了 adb shell cd /system/plugin/....exit 在网上查到的都是bat文件调用adb shell,没有sh文件调 ...

  4. 09-04 java 接口

    接口的引出 继续回到我们的猫狗案例,我们想想狗一般就是看门,猫一般就是作为宠物了,对不.但是,现在有很多的驯养员或者是驯兽师,可以训练出:猫钻火圈,狗跳高,狗做计算等. 而这些额外的动作,并不是所有猫 ...

  5. Python获取二维数组的行列数

    import numpy as np x = np.array([[1,2,5],[2,3,5],[3,4,5],[2,3,6]]) # 输出数组的行和列数 print x.shape # (4, 3 ...

  6. android开发学习——day5

    活动跳转部分代码显式intent @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(saved ...

  7. Android_触摸事件传递机制

    Android中dispatchTouchEvent,onInterceptTouchEvent, onTouchEvent的理解ecandroid中的事件类型分为按键事件和屏幕触摸事件,Touch事 ...

  8. Vue笔记:使用 Yarn 管理依赖包

    上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快.更高效. Yarn VS npm 1.yarn.lock 文件 在 npm 中同样 ...

  9. JSP 基础(二)

    五 注释  5.1 JSP注释     <%--注释内容--%> 5.2 HTML注释    <!--注释内容--> 5.3 Java注释 六 JSP指令 在JSP中有三种类型 ...

  10. Ubuntu16.04安装mac主题(转载)

    Ubuntu16.04配置Mac主题 作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7072878.html 觉得有帮助?欢迎 ...