码迷,mamicode.com
首页 > 其他好文 > 详细

实现元素垂直居中的方法(补充)

时间:2017-08-02 23:39:30      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:body   ossim   absolute   title   文字   简便   oct   cte   宽度   

        之前发过一次《实现元素垂直居中的方法》的文章,今天又碰到了更简便的方法,就是利用transform属性,特别是当要居中的元素宽度,高度未知时非常好使,废话不多说,直接上demo:

<!DOCTYPE html>
<html>
<head lang="zh-cn">
   <meta charset="UTF-8">
   <title>居中的方法</title>
   <style>
       div{
           position:absolute;
           left:50%;
           top:50%;
           -webkit-transform: translate(-50%,-50%);
           -moz-transform: translate(-50%,-50%);
           -ms-transform: translate(-50%,-50%);
           -o-transform: translate(-50%,-50%);
           transform: translate(-50%,-50%);
           background: #ddd;
       }
   </style>
</head>
<body>
<div>示例文字:本段话的宽度,高度不确定,且可能发生变化。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut commodi deserunt distinctio eligendi enim error eum exercitationem fugiat in, laudantium molestias perferendis, porro possimus quibusdam quisquam sequi tempore veniam.</div>
</body>
</html>

怎么样?是不是很方便,新技能get!

不知道在看文章的你有没有更好的方法,欢迎一起讨论。

实现元素垂直居中的方法(补充)

标签:body   ossim   absolute   title   文字   简便   oct   cte   宽度   

原文地址:http://www.cnblogs.com/gaoxinwu/p/7277071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!